CODEWITHSUNDEEP
htmlcss
Marchese Il Chihuahua
Marchese Il Chihuahua

Reputation: 1139

Centering a span horizontally after centering it vertically

After going through the long process of learning how to vertically centre a span in a div, at the end, my text content is no longer centered horizontally despite having set text-align: center. Also, very strangely to note, the horizontal centering DOES WORK only when the text within the span wraps to a second line. 

enter code here

<div class="tier_blurb dh"> 
   <div class="blurb_title">
      <span>Assign ownership</span>
   </div>Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available</div>
</div>

.blurb_title {
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: -1px;
    margin-bottom: 10px;
    height: 43px;
    display: table-cell;
}

.blurb_title span {
    vertical-align: middle;
}

Upvotes: 0

Views: 490

Answers (4)

Naresh
Naresh

Reputation: 872

Follow the references CSS Flex-box and CSS Centering Things

You can also use CSS Flex-box (My Recommendation)

display: flex; align-items: center; justify-content: center; 

.blurb_title {
    border: 1px solid green;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    text-transform: uppercase;
}
<div class="tier_blurb dh">
  <div class="blurb_title">
    <span>Assign ownership</span>
  </div>
  Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available
</div>

Upvotes: 0

Hokusai
Hokusai

Reputation: 2369

You could use Flex-box:

.blurb_title {
    align-items: center;
    display: flex;
    vertical-align: middle;
}

Upvotes: 1

Roberto Picco
Roberto Picco

Reputation: 11

Note that center aligning does not work if width property is not specified or set to 100%

Upvotes: 0

Banzay
Banzay

Reputation: 9470

You need to define width attribute for .blurb_title because any table cell without specified width will get width of its content.

.blurb_title {
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: -1px;
    margin-bottom: 10px;
    height: 43px;
    display: table-cell;
    border: 1px solid green;
    width: 100vw;
}
<div class="tier_blurb dh"> 
   <div class="blurb_title">
      <span>Assign ownership</span>
   </div>Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available</div>
</div>

Upvotes: 2

Related Questions