html css выравнивание элементов в div

Я использую CSS3 и HTML5 с Sublime, и я пытаюсь выровнять три элемента внутри div, но я не знаю, как это сделать. Элементы расположены во втором div, и они представляют собой кнопку и два изображения.html css выравнивание элементов в 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; 
 
}

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

источник

2016-10-18 Michele della Mea

Что вы подразумеваете под «выровнять абсолютно три элемента»? вы имеете в виду горизонтальный с точной шириной? – Kossel

# kossel Да выровнять по горизонтали ... каждый элемент с одинаковым расстоянием друг от друга. –

Я думаю, что с дисплеем прогибается вы можете это исправить.

Добавление

display: flex;

в контейнер, элементы внутри него поместится контейнер идеально.

Я рекомендую, чтобы увидеть совместимость в http://caniuse.com/#search=flex

и проверки этой статьи Шон Fioritto

Вот мой codepen с примером того, как Flexbox работает в вашем случае http://codepen.io/buenopw/pen/qaJYWN

источник

2016-10-18 17:29:21

Я предлагаю вам создать контейнер или оболочка вместо редактирования свойств тегов, особенно div, h1, что очень часто встречается на всей странице.

пожалуйста, посмотрите на https://plnkr.co/edit/ShRKKsPHd8vcBTqW25L1?p=preview

, если вы хотите, чтобы они соответствовали ширине страницы, то эти дочерние элементы не должны фиксированного размера.

источник

2016-10-18 18:16:30 Kossel

html css выравнивание элементов в div

ответ

Смежные вопросы