div中的html css对齐元素

Question

I am using CSS3 and HTML5 with Sublime and I am trying to align perfectly three elements inside a div but I don't know how to do that. The elements are located in the second div and they are a button and two images.

 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

I think that with a display flex you can fix it.

Adding a

display: flex; 

to the container, the items inside him will fit the container perfectly.

I recommend to see the compatibility in http://caniuse.com/#search=flex

and checking this article by Sean Fioritto

Here's my codepen with an example of how flexbox works in your case http://codepen.io/buenopw/pen/qaJYWN

Answer 2

I suggest you to create container or wrapper class instead of edit the properties of tags, specially div , h1 which is very common across the whole page.

please have a look at https://plnkr.co/edit/ShRKKsPHd8vcBTqW25L1?p=preview

if you want them to fit the width of the page, then those children elements should not have fixed size.