Question

我在容器中有一些文本需要位于页面的中心 - 水平和垂直。因为我需要它缩小 I have set up a JSFiddle here

HTML：

stat

CSS：

<div class="projectsimageswrap">
    <div class="project projectimg1" style="width: 100%; background-color:rgb(127,127,127);">
      <div id="thebrief">
        <h4>The Brief</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a quam dapibus, dictum nunc eget, porttitor mauris. Mauris tempor lectus nisi. Vivamus pharetra magna risus. Praesent dignissim maximus libero. Aliquam imperdiet velit eu lacus tristique, vitae mattis dui tempor. Nam varius odio efficitur, mattis ex id, rutrum mi. Vestibulum sollicitudin at tellus non iaculis. Curabitur eu velit lectus. Curabitur molestie turpis vitae arcu ultrices, in porttitor leo posuere. Etiam sed imperdiet risus, id elementum augue. Ut euismod tincidunt eros dapibus iaculis.

      Ut eget viverra odio, sed varius augue. Donec eu nisl vitae velit sagittis maximus eu vitae orci. Pellentesque sed nisi congue, luctus ante sit amet, scelerisque nisi. Sed ac ipsum eros. Proin ut arcu ac risus elementum vulputate. Suspendisse tincidunt varius lectus et pulvinar. Mauris vehicula ex diam, vel hendrerit mauris egestas eget. Aenean vulputate, turpis mollis condimentum maximus, sem purus venenatis enim, a luctus eros nulla et ligula. Aliquam porta mauris in fringilla tempor. Fusce a laoreet nibh. Aliquam vehicula eget justo at scelerisque. Integer eget dui eros. Nulla et congue sem.</p>
    </div>
</div>

Answer 1

您可以使用以下css行来垂直和水平居中：

position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width: 300px;

Example

Answer 2

只需在css文件中为div类添加 text-align：center 。

在您的情况下，为#thebrief

添加相对位置

 #thebrief{
    position: relative;
    margin: auto;
    width: 300px;
}

Answer 3

您可以添加以下代码。

 #thebrief{
    position: relative;
    margin: auto;
    width: 300px;
    text-align:center;

}

Fiddle

Answer 4

你这样做的方式非常奇怪。但是如果你需要水平居中所有内容，你需要将文本对齐中心添加到#thebrief并将#thebrief本身放在中心。由于您使用position：absolute，因此需要将left设置为50％并将其在x轴上转换为-50％。示例：

.projectsimageswrap {
  margin: 0 auto;
  background-color: rgb(247, 200, 198);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.projectsimageswrap .project {
  width: 50%;
  padding-bottom: 50%;
  margin: 0;
  float: left;
  background: rgb(204, 234, 236);
  position: relative;
}
/*style for the briefs*/

#thebrief {
  position: absolute;
  width: 300px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  text-align: center;
}

<div class="projectsimageswrap">
  <div class="project projectimg1" style="width: 100%; background-color:rgb(127,127,127);">
    <div id="thebrief">
      <h4>The Brief</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a quam dapibus, dictum nunc eget, porttitor mauris. Mauris tempor lectus nisi. Vivamus pharetra magna risus. Praesent dignissim maximus libero. Aliquam imperdiet velit eu lacus tristique,
        vitae mattis dui tempor. Nam varius odio efficitur, mattis ex id, rutrum mi. Vestibulum sollicitudin at tellus non iaculis. Curabitur eu velit lectus. Curabitur molestie turpis vitae arcu ultrices, in porttitor leo posuere. Etiam sed imperdiet
        risus, id elementum augue. Ut euismod tincidunt eros dapibus iaculis. Ut eget viverra odio, sed varius augue. Donec eu nisl vitae velit sagittis maximus eu vitae orci. Pellentesque sed nisi congue, luctus ante sit amet, scelerisque nisi. Sed ac
        ipsum eros. Proin ut arcu ac risus elementum vulputate. Suspendisse tincidunt varius lectus et pulvinar. Mauris vehicula ex diam, vel hendrerit mauris egestas eget. Aenean vulputate, turpis mollis condimentum maximus, sem purus venenatis enim,
        a luctus eros nulla et ligula. Aliquam porta mauris in fringilla tempor. Fusce a laoreet nibh. Aliquam vehicula eget justo at scelerisque. Integer eget dui eros. Nulla et congue sem.</p>
    </div>
  </div>
</div>

将文本与页面中心对齐

4 个答案: