Question

我遇到一个问题，让我的网站上有两个并排的div。它是一个徽标，旁边有一段文字，我希望它们水平和垂直居中，但我无法弄清楚这个特殊情况。我附上了一个小提琴和一个链接到下面的实际网站。

HTML：

<div class="content">
   <div class="left">
      <img src="images/mark.png" alt="Civilians Stamp"/>
   </div>
   <div class="right">
      <p>Civilians is a Cape Town based film collective creating original content across multiple platforms.</p>
      <p>The collective is made up of Writers, Directors & Producers creating original content for film and television. </p>
   </div>
</div>

CSS：

.content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.left {
    float: left;
    width: 30%;
    margin: 0 auto;
    padding-top: 20%;
    padding-left: 10%;

}

.left img {
    max-width: 200px;
    width: 100%;
    float: left;
}

.right {
    float: right;
    width: 50%;
    margin: 0 auto;
    margin-right: 10%;
    margin-top: 19.2%;
}

.right p {
    font-family: 'proxima-nova', sans-serif;
    font-weight: 500;
    line-height: 210%;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: justify;
    float: left;
}

http://jsfiddle.net/wfx7srea/

http://civilians.co.za/home.html

任何有助于此工作的帮助都会很棒！

Answer 1

我将这3个CSS更改为水平和垂直对齐内容。

.content {
    width: 825px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.left {
    float: left;
    margin: 0 auto;
    text-align: right;
}

.right {
    float: left;
    width: 75%;
    margin: 0 auto;
}

这是最终结果：https://jsfiddle.net/wfx7srea/3/

此方法的缺点是您需要为居中元素使用固定的宽度和高度。

Answer 2

我不确定你想要实现的布局，但是以下示例可能足以让你开始。

我正在使用CSS表进行居中。

https://jsfiddle.net/wfx7srea/1/

.content {
  display: table;
}
.left {
  display: table-cell;
  vertical-align: middle;
}

垂直居中不同浏览器窗口的内容

2 个答案: