div中的html css對齊元素

Question

我將CSS3和HTML5與Sublime結合使用，並且試圖將div中的三個元素完美對齊，但是我不知道該怎么做。 元素位於第二個div中，它們是一個按鈕和兩個圖像。

 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; } 

  <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> 

Answer 1

我認為使用display flex可以修復它。

添加一個

display: flex; 

對於容器，他里面的物品將完全適合容器。

我建議在http://caniuse.com/#search=flex中查看兼容性

並查看Sean Fioritto的這篇文章

這是我的Codepen，並提供了一個關於flexbox如何在您的情況下工作的示例http://codepen.io/buenopw/pen/qaJYWN

Answer 2

我建議您創建容器或包裝器類，而不是編輯標記的屬性，尤其是div ， h1 ，這在整個頁面中都很常見。

請查看https://plnkr.co/edit/ShRKKsPHd8vcBTqW25L1?p=preview

如果希望它們適合頁面的寬度，則這些子元素不應具有固定的大小。