Centering a section with text inside a container

Question

I have a container with a height: 246px, I then have a div with text inside which I want to center vertically and horizontally in the div and also in this container.

The desired result should look like this Navy row

My code currently looks like this:

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

https://jsfiddle.net/x15v5znr/ check it out thats fits your case — Adel Elkhodary, May 15 '18 at 09:55

score 1 · Accepted Answer · answered May 15 '18 at 09:51

Just add display:flex to #rowsec and vertical-align:middle to 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>

The problem I encountered with using this, was that my column width for {.stat} no longer worked. But display:flex seems to do the trick! Thanks a lot. — LadyX, May 16 '18 at 06:49

score 0 · Answer 2 · answered May 15 '18 at 09:46

just modify the css of #rowsec and .colwrap

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

working fiddle here

if answer has solved your question please consider accepting it by clicking the check-mark and upvote. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. :) — Zuber, May 15 '18 at 13:02
can you please accept and upvote my answer if it helped you? @Cathy — Zuber, May 16 '18 at 07:02

Centering a section with text inside a container

2 Answers2