Question

我有一个高度为246px的容器，然后我有一个文本div，我想在div中垂直和水平居中，也在这个容器中。

所需的结果应如下Navy row

我的代码目前看起来像这样：

HTML

<section id="rowsec">
        <div class="colwrap">
                <span class="layer">41%</span>
                <span class="stat">Company average cost saving  versus originator brands on the South African market</span>
                <span class="layer">10+</span>
                <span class="stat">Company has 10 market leading brands within the family of products</span>
        </div>
    </section>

CSS

#rowsec {
height: 246px;
width: 100%;
 background-color: #0c225f;
}
/* Clears floats after the columns */
#rowsec:after {
content: "";
display: table;
clear: both;
}
.colwrap{
width: 80%;
margin: auto;
}

.layer {
font-family: 'HKGroteskMedium';
font-size: 75px;
font-weight: 500;
line-height: 1.2;
color: #9fb8ff;
}

.stat {
padding-left: 35px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.45;
color: #ffffff;
max-width: 412px;
}

.colwrap a{
float: left;
}

Answer 1

只需修改#rowsec和.colwrap

的css即可

#rowsec {
    height: 246px;
    width: 100%;
    background-color: #0c225f;
    display: flex;
    align-items: center;
}
/* Clears floats after the columns */
#rowsec:after {
content: "";
display: table;
clear: both;
}
.colwrap {
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
}

.layer {
font-family: 'HKGroteskMedium';
font-size: 75px;
font-weight: 500;
line-height: 1.2;
color: #9fb8ff;
}

.stat {
padding-left: 35px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.45;
color: #ffffff;
max-width: 412px;
}

.colwrap a{
float: left;
}

<section id="rowsec">
        <div class="colwrap">
                <a class="layer">41%</a>
                <a class="stat">Company average cost saving  versus originator brands on the South African market</a>
                <a class="layer">10+</a>
                <a class="stat">Company has 10 market leading brands within the family of products</a>
        </div>
    </section>

工作小提琴here

Answer 2

只需将display:flex添加到#rowsec，将vertical-align:middle添加到span

#rowsec {
  height: 246px;
  width: 100%;
  background-color: #0c225f;
  display:flex;
}
span{

vertical-align:middle;}

/* Clears floats after the columns */

#rowsec:after {
  content: "";
  display: table;
  clear: both;
}

.colwrap {
  width: 80%;
  margin: auto;
}

.layer {
  font-family: 'HKGroteskMedium';
  font-size: 75px;
  font-weight: 500;
  line-height: 1.2;
  color: #9fb8ff;
}

.stat {
  padding-left: 35px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.45;
  color: #ffffff;
  max-width: 412px;
}

.colwrap a {
  float: left;
}

<section id="rowsec">
  <div class="colwrap">
    <span class="layer">41%</span>
    <span class="stat">Company average cost saving  versus originator brands on the South African market</span>
    <span class="layer">10+</span>
    <span class="stat">Company has 10 market leading brands within the family of products</span>
  </div>
</section>

将带有文本的部分居中放置在容器内

2 个答案: