CSS3와 HTML5를 Sublime과 함께 사용하고 있는데 div의 내부에 세 개의 요소를 완벽하게 정렬하려고합니다.하지만 그 방법을 모르겠습니다. 요소는 두 번째 div에 있으며 버튼과 두 개의 이미지입니다.div에서 CSS를 정렬하는 CSS CSS
h1 {
margin-left: 510px;
}
div {
column-count: 2;
padding-left: 50px padding-right: 50px;
}
button {
background-color: red;
width: 100px;
height: 70px;
margin-left: 50px;
margin-top: 50px;
}
/*
div img {
margin-left: 735px;
width:304px;
height:228px;
visibility:hidden;
} */
#myImageId {
margin-left: 35px;
width: 304px;
height: 228px;
visibility: visible;
}
#myImageId2 {
margin-left: 35px;
width: 304px;
height: 228px;
visibility: visible;
}
\t <h1>Lorem Ipsum</h1>
<br>
<div>
<h3>Cos’è Lorem Ipsum?</h3>
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare
un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”,
che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
<br>
<h3>Perchè lo utilizziamo?</h3>
È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di
quanto avviene se si utilizzano brevi frasi ripetute, ad esempio “testo qui”), apparendo come un normale blocco di testo leggibile. Molti software di impaginazione e di web design utilizzano Lorem Ipsum come testo modello. Molte versioni del testo sono
state prodotte negli anni, a volte casualmente, a volte di proposito (ad esempio inserendo passaggi ironici).
</div>
<br>
<div>
<button type="button" onclick="showImage()">Show/Hide image!</button>
<img src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" alt="Lorem" id="myImageId">
<img src="http://www.metal-archives.com/images/1/5/5/0/15500_logo.jpg" alt="Lorem2" id="myImageId2">
</div>
"완벽하게 세 요소 정렬"이란 무엇을 의미합니까? 정확한 너비로 수평을 의미합니까? – Kossel
#kossel 예. 각 요소를 같은 거리만큼 수평으로 정렬합니다. –