Net etiket ve içeriğin etrafına metin hizalama merkezleri olmadan resim altında metin eklenemez, sayfa

Question

Herhangi bir nedenle metin1, temiz bir etiket kullanmadığım sürece resmin altındaki yerine bir sonraki sütuna gider. Net bir etiket kullanmayla ilgili sorun, text1'in daha önce net etiketin önündeydi ve bu yüzden paragraflardan önce büyük bir alan görebildiğiniz yere metin2 ekleyemem.

Ayrıca metin hizalaması, metni sayfada ortalamıyor. İçeriğinin etrafındaki metni ortalar. Bunu nasıl düzeltirim?

Jsfiddle - https://jsfiddle.net/p6eocccj/

HTML

<div id="div1"> 
<p id="text0"><span id="sp1pg4">About me</span></p> 
<img id="img1" src ="images/hack.jpg"/> 
<br> 
<p id="text1"><strong>Image Courtesy Homer Simpson</strong><br></br> 
<a href="www.google.com">www.homersimpsoniscooltoo.com</a></p> 
<p id="text2"> 
Hi there! 
<br></br> 
I'm bob, a coool designer and developer<br> 
from Far far coolioland, Australia. I<br> 
specialise in cooking, shipping, shopping,<br> 
camping and turning coffee into popcorn. My<br> 
approach to buytying is this, make it clean and<br> 
simple but also focus on the buying for men. This<br> 
is what differentiates poor people from great chimps.<br> 
Whether you want to build a house for as long as<br> 
business, a personal toy or just ask you some<br> 
</p> 
</div> 

float eklemek Çünkü resmin üzerine yüzer veya berrak eklemek tag..remove görüntüye soldan

#div1 { 
width: max-width; 
height: 1650px; 
background-color: #ECECEC; 
} 

#text0 { 
text-align: left; 
padding-top: 25px; 
padding-left:150px; 
} 

#img1 { 
float:left; 
margin-top: 25px; 
margin-left:150px; 
width: 220px; 
height: 220px; 
border-radius: 50%; 
} 

#text1 { 
clear:left; 
float:left; 
padding-left:160px; 
font-size:13px; 
line-height:80%; 
} 

#text2 { 
padding-top: 100px; 
line-height: 140%; 
text-align: center; 
font-family: sans-serif; 
font-size: 15px; 
} 

Answer 1

float kararını uyguladığınızda Herhangi bir öğeye göre, bu öğe Normal Belge Akışı'nın bir parçası değildir ve etrafındaki metinleri saracaktır. Ya float'u kaldırın ya da clearfix hack kullanın.

İşte Clearfix hack-

.clearfix::after { 
    display: table; 
    content: ''; 
    clear: both; 
} 

P.S.: Ben sadece görüntüden float: left kaldırdık. Hack'i kullanmak isterseniz, resmin ana öğesine clearfix sınıfını uygulayın.

#div1 { 
 
     width: max-width; 
 
     height: 1650px; 
 
     background-color: #ECECEC; 
 
} 
 

 
#text0 { 
 
\t text-align: left; 
 
\t padding-top: 25px; 
 
\t padding-left:150px; 
 
} 
 

 
#img1 { 
 
\t margin-top: 25px; 
 
\t margin-left:150px; 
 
\t width: 220px; 
 
\t height: 220px; 
 
\t border-radius: 50%; 
 
} 
 

 
#text1 { 
 
    clear:left; 
 
\t \t float:left; 
 
\t \t padding-left:160px; 
 
\t \t font-size:13px; 
 
\t \t line-height:80%; 
 
} 
 

 
#text2 { 
 
\t padding-top: 100px; 
 
\t line-height: 140%; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    font-size: 15px; 
 
}

<div id="div1"> 
 
<p id="text0"><span id="sp1pg4">About me</span></p> 
 
<img id="img1" src ="images/hack.jpg"/> 
 
<br> 
 
<p id="text1"><strong>Image Courtesy Homer Simpson</strong><br></br> 
 
<a href="www.google.com">www.homersimpsoniscooltoo.com</a></p> 
 
<p id="text2"> 
 
Hi there! 
 
<br></br> 
 
I'm bob, a coool designer and developer<br> 
 
from Far far coolioland, Australia. I<br> 
 
specialise in cooking, shipping, shopping,<br> 
 
camping and turning coffee into popcorn. My<br> 
 
approach to buytying is this, make it clean and<br> 
 
simple but also focus on the buying for men. This<br> 
 
is what differentiates poor people from great chimps.<br> 
 
Whether you want to build a house for as long as<br> 
 
business, a personal toy or just ask you some<br> 
 
</p> 
 
</div>

Answer 2

CSS elemanları

metne