Question

我正在使用Sublime的CSS3和HTML5，我试图在div中完美地对齐三个元素，但我不知道如何做到这一点。元素位于第二个div中，它们是一个按钮和两个图像。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我认为使用显示器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

如果您希望它们适合页面的宽度，那么这些子元素不应该具有固定的大小。

html css在div中对齐元素

2 个答案: