CODEWITHSUNDEEP
cssflexbox
dman
dman

Reputation: 11064

Vertically align text - flexbox inlines when I need the text to be on separate lines

How I can center the text blocks vertically? I tried using flexboxe's justify-content: center; align-items: center to each .header-item. But that would inline the div children of each .header-item, thus inlineing the text and I want the text to stay on separate lines .

https://jsfiddle.net/hnwp7afs/

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.header {
  display: flex; 
  flex-flow: row wrap;
  background: pink;
  text-align: center;
}


.fin-expert {
  width: 100%;
}

.header-item {
  background: blue;
  width: 100%;
  height: 100px;
}

.header-item:nth-child(odd) {
  background: pink;
} 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

  <div class="header">
    <div class="fin-expert header-item">foo store</div>
    <div class="header-item">
      <div> 333 north pole</div>
      <div> alaska, 1234</div>
    </div>
    <div class="header-item">
      <div>(123) 226-3232</div>
      <div>[email protected]</div>
    </div>
    <div class="header-item">
      <div>Mon - Sat: 900 - 18:00</div>
      <div>Sunday CLOSED</div>
    </div>
  </div>

  <body>
  </body>
</html>

Upvotes: 0

Views: 11

Answers (1)

VXp
VXp

Reputation: 12068

Then you were close, adding just flex-direction: column solves it:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.header {
  display: flex; 
  flex-flow: row wrap;
  background: pink;
  text-align: center;
}

.fin-expert {
  width: 100%;
}

.header-item {
  display: flex;
  flex-direction: column; /* stacks children vertically */
  justify-content: center;
  align-items: center; /* optional since you have text-align: center on the .header */
  background: blue;
  width: 100%;
  height: 100px;
}

.header-item:nth-child(odd) {
  background: pink;
}
<div class="header">
  <div class="fin-expert header-item">foo store</div>
  <div class="header-item">
    <div> 333 north pole</div>
    <div> alaska, 1234</div>
  </div>
  <div class="header-item">
    <div>(123) 226-3232</div>
    <div>[email protected]</div>
  </div>
  <div class="header-item">
    <div>Mon - Sat: 900 - 18:00</div>
    <div>Sunday CLOSED</div>
  </div>
</div>

Upvotes: 1

Related Questions