CODEWITHSUNDEEP
htmlcss
michaeluskov
michaeluskov

Reputation: 1828

Vertically center text in DIV

I have this HTML/CSS snippet:

.matrix-right-letter-container {
	font-size: 48px;
}


.matrix-place {
	display: inline-block;
	vertical-align: top;
	margin: 10px;
}

.matrix-input {
	height: 50px;
	width: 50px;
	margin: 3px;
	vertical-align: bottom;
}
<div class="matrix-line-container">
  <div id="matrix-c-place" class="matrix-place bracketed">
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
  </div>
  <div id="matrix-a-place" class="matrix-place bracketed">
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
  </div>
  <span class="matrix-right-letter-container">A</span>
</div>

I need to center letter A vertically in matrix-line-container. But adding vertical-align: middle to .matrix-right-letter-container doesn't help. How can I do it?

Upvotes: 1

Views: 94

Answers (2)

Paul Kozlovitch
Paul Kozlovitch

Reputation: 804

You should vertical-align: middle all inline-blocks in order to vertically align all of them relative to each other

.matrix-right-letter-container {
	font-size: 48px;
}


.matrix-place {
	display: inline-block;
	vertical-align: middle;
	margin: 10px;
}

.matrix-input {
	height: 50px;
	width: 50px;
	margin: 3px;
	vertical-align: bottom;
}
<div class="matrix-line-container">
  <div id="matrix-c-place" class="matrix-place bracketed">
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
  </div>
  <div id="matrix-a-place" class="matrix-place bracketed">
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
  </div>
  <span class="matrix-right-letter-container">A</span>
</div>

Upvotes: 1

Sai
Sai

Reputation: 1949

There is two ways you can do this atleast. Ofcourse the CSS way or using some JS.

option 1: CSS

now you can give the parent container of your span text a display:table property and the element you want to vertical align itself a display:table-cell property and align it top, middle bottom etc.

Code snippet here:

.matrix-line-container {
  background: grey;
  display: table;  /* See what I did here? */
}
.matrix-right-letter-container {
  font-size: 48px;
  background: cyan;
  display: table-cell;  /* And also here*/
  vertical-align: middle;  /* And here*/
}
.matrix-place {
  display: inline-block;
  vertical-align: top;
  margin: 10px;
  background: pink;
}
.matrix-input {
  height: 50px;
  width: 50px;
  margin: 3px;
  vertical-align: bottom;
}
<div class="matrix-line-container">
  <div id="matrix-c-place" class="matrix-place bracketed">CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>
  </div>
  <div id="matrix-a-place" class="matrix-place bracketed">CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>
  </div> <span class="matrix-right-letter-container">A</span>

</div>

Now the second option,

Option 2 : some JS ( not really recommended but if you want to get fancy then , i guess)

In this option you just want to find the height of the height of the parent div element ( I have used jQuery, just because i like it, thats it, makes my typing easier. Now you have secondary options of just height() or innerHeight() or outerHeight(). Use it whatever you like according to user specific case). Once you have the height of the parent div element then just apply that height to your span element as line-height property and Voila! there you have it!

Now the code snippet for the second funky option,

// Obviously I added some script - What else did you think I was gonna do?!!

var divht = $('.matrix-line-container').innerHeight() + 'px'; /* DO NOT forget to add that little 'px' to the end or else it wont work! */
$('.matrix-right-letter-container').css("line-height", divht);
.matrix-line-container {
  background: grey;
}
.matrix-right-letter-container {
  font-size: 48px;
  background: cyan;
}
.matrix-place {
  display: inline-block;
  vertical-align: top;
  margin: 10px;
  background: pink;
}
.matrix-input {
  height: 50px;
  width: 50px;
  margin: 3px;
  vertical-align: bottom;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="matrix-line-container">
  <div id="matrix-c-place" class="matrix-place bracketed">CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>
  </div>
  <div id="matrix-a-place" class="matrix-place bracketed">CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>CONTENT
    <br/>
  </div> <span class="matrix-right-letter-container">A</span>

</div>

Hope this has given you something to think about ;)

Hope this helps and Happy coding

Upvotes: 2

Related Questions