CODEWITHSUNDEEP
htmlcssvertical-alignmentvertical-text
Ric
Ric

Reputation: 498

Vertically centered text in a dynamic height wrapper

I'd normally just use line-height for vertical centering, but on this occasion the layout I'm working to is a little trickier.

I've put together this jsfiddle to show where I'm at so far. All the CSS hacks suggest using table-cell trickery for this but I can only get it to work if the wrapper has an absolute height, so for me this text isn't vertically centered:

<div class="wrap">
    <a href="#">
        <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
        <span class="text"><span>Text that might span multiple lines</span></span>
    </a>
</div>

https://jsfiddle.net/fdtbvmcw/

What I basically need is for the text, regardless of how many lines it spans, to sit in the middle of the image. The image can't be a background-image and I can't attach fixed widths or heights to the wrapper.

The wrapper is simulating a responsive column within a bigger page template and I need the image to retain full width of that column you see. Other HTML can be added within the column if need be.

Thoughts?

Upvotes: 0

Views: 1293

Answers (3)

marcos.efrem
marcos.efrem

Reputation: 767

I think is better use translateY, it works in more devices

//CSS
.wrap {
  height: auto;
  position: relative;
  width: 50%;
}

.wrap a img {
  height: auto;
  width: 100%;
}

.wrap span {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 30px;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);  
  display:block;
  position:absolute;
  text-align:center;
}

//HTML
<div class="wrap">
<a href="#">
  <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
  <span>Text that might span multiple lines</span>
</a>
</div>

https://jsfiddle.net/MAXXALANDER/fdtbvmcw/2/

Upvotes: 0

Nazar Becks
Nazar Becks

Reputation: 177

I would also use flex for your solution.

.wrap a .text {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top:0;
  display: flex; 
  display: -webkit-box;    
  display: -moz-box;       
  display: -ms-flexbox;    
  display: -webkit-flex;    
  justify-content: center;
  align-items: center;
}

Upvotes: -1

Paulie_D
Paulie_D

Reputation: 115288

Flexbox can do that...

.wrap {
  height: auto;
  position: relative;
  width: 50%;
}

.wrap a img {
  height: auto;
  width: 100%;
}

.wrap a span.text {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap a span.text span {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.25
}
<div class="wrap">
  <a href="#">
    <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
    <span class="text"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id praesentium nihil iure amet dolore nulla totam modi </span></span>
  </a>
</div>

Upvotes: 3

Related Questions