How to Vertically Center a <Span> Inside a Div

How to vertically center a span inside a div?

See my article on understanding vertical alignment. There are multiple techniques to accomplish what you want at the end of the discussion.

(Super-short summary: either set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50% with margin-top:-YYYpx, YYY being half the known height of the child.)

Vertically align span in a div

Set display: flex; justify-content: center; align-items: center; for col-sm text-center or, alternatively, set display: flex; justify-content: center; for col-sm text-center and align-self: center; for <span>.

.col-sm.text-center {    display: flex;    justify-content: center;    align-items: center;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><div class="container-fluid"><style>
</style><div class="row">  <div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">      Your Account  </div></div><div class="row">  <div class="col-sm text-center" style="background-color:#0471AF; height:100px;">    <span class="align-middle">ABC Company</span>  </div></div>

Center align a span inside a div with an img element

The answer here is probably to use flexbox. If your flex-direction is row (which is default), you can use align-items to center the elements vertically and justify-content to justify the row to the left (the "start" of the flex container). Let me know if you have any questions!

.element {  align-items: center;  display: flex;  justify-content: flex-start;}
.element img {  height: 40px;  width: 40px;  border-radius: 50%;  margin-right: 20px;}
.element span {  display: inline-block;}

<div class="element">  <img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">  <span>hello</span></div>

How to vertically center text in a span ?

Try using flexbox, all modern browsers support it, with prefixes it also works in IE10.

span {  min-height: 100px;  display: inline-flex;  align-items: center;  border: 1px solid aqua;}

<span>vertical center</span>

Css vertical align span inside div

I think these CSS properties will work. Please try this.

#parent_div{
display:flex;
align-items:center;
direction:column;
}
#child_element{
display:flex;
align-self: center;
}

Vertical align span inside div

Update you CSS to

.container {
  width: 100%;
  height: 50px;
  display: table-cell;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

.container span {
}

How to Vertically Center a <Span> Inside a Div