Question

我希望在我网页的主div元素中水平对齐图像和文本段落。

div包装如下：

.container{
  height:500px;
  width:500px;
  position:relative;
}

.jprt-hover{
  background-color:#000;
  height:500px;
  width:500px;
}

.jprt-hoveroverlay{
  background-color:#FFF;
  position: absolute;
  height:500px;
  width: 500px;
  top: 0;
  left: 0;
}

这是正确的布局吗？如果是这样，我需要什么CSS？

Answer 1

您需要将两个内部div设置为

display: inline-block;

看看这个小提琴。 https://jsfiddle.net/m8athtLp/light/

Answer 2

您可以使用两种方式：首先，从您的标记中，您可以将css用于float: left图片和float: right段落。其次，

<pre><div id="main">
  <img src="images/img.jpg" alt=""> 
  <p>your text</p>
</div></pre>

对于此代码，您可以使用float: left作为图片，段落文字自动对齐

由于

无法弄清楚如何对齐HTML / CSS Div

2 个答案: