0

This is what I need

Is it possible to center Title between two divs which can have different size? Without JS.

<div class="parent">
   <div class="subtitle">Subtitle</div>
   <h2>Title</h2>
   <div class="subtitle">Subtitle</div>
</div>

I checked Stretch (vertically) middle div between the other two but I don't know max-height for header, footer in my case.

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Nick
  • 3
  • 2
  • 3
    Welcome to SO, Where is the CSS and complete HTML, can you provide a working snippet with the issue? – Naren Murali Sep 26 '17 at 17:31
  • @NarenMurali I posted the answer on similar question. I can copy-paste it, but I think it doesn't have any sense, because it doesn't work for my case. And I don't know how to do it. it's why I didn't post CSS. – Nick Sep 26 '17 at 17:39

1 Answers1

0

That is what flex is for, assuming that you don't have to support older browsers. See can I use.

.parent {
  position: relative;
  background: black;
  color: white;
  min-height: 100px;
  display:flex;
  flex-direction: column;
  align-content: space-between;
  padding: 0 40px;
  border: 1px solid white;
  width: calc(33% - 90px);
  float:left;
}
.parent:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: red;
}
.parent h2 {
  position: absolute;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}
.subtitle {
  padding: 40px 0;
}
<div class="parent">
   <div class="subtitle">Subtitle</div>
   <h2>Title</h2>
   <div class="subtitle">Subtitle</div>
</div>

<div class="parent">
   <div class="subtitle">Subtitle<br/>Subtitle<br/>Subtitle</div>
   <h2>Title</h2>
   <div class="subtitle">Subtitle</div>
</div>

<div class="parent">
   <div class="subtitle">Subtitle</div>
   <h2>Title long<br/>2 lines</h2>
   <div class="subtitle">Subtitle</div>
</div>
Jonathan
  • 6,507
  • 5
  • 37
  • 47
  • `Title` and `Title question` should be centered. `Subtitle` can be higher or lower – Nick Sep 26 '17 at 17:43
  • The left and right `

    `s are centred vertically with each other. The middle one is pushed down slightly (like on your image) to make way for the subtitle that is twice as high.

     – Jonathan Sep 26 '17 at 17:45
  • @Jonathan, just checked https://codepen.io/anon/pen/Qqpjgx. The title is not centered in the second block. – Nick Sep 26 '17 at 17:48
  • Ah, you want the block to adjust height based on the heights of all three divs so that the centre one stays centred? – Jonathan Sep 26 '17 at 17:49
  • The parent is fluid. Can be different height, just fixed padding. But `Title` should be centered. – Nick Sep 26 '17 at 17:50
  • @Nick, right. And basically, the bottom div should grow to be the same height as the top subtitle div? Like this (but obviously not hard-coded) https://jsfiddle.net/kf6hs7hd/1/ Or should the title move up to keep the div the same height like this: https://jsfiddle.net/kf6hs7hd/2/ – Jonathan Sep 26 '17 at 17:56
  • Thank you so much! The second one. Could you please update your answer and I'll check it. – Nick Sep 26 '17 at 17:57
  • OK, I'll try to get it so it is not hard-coded first and then update the answer. – Jonathan Sep 26 '17 at 17:58