All geek questions in one place

Vertical center text inside a div

I am trying to vertically center some text inside a div. It sounds easy, but I can't get it. Here is the code, sorry for the poor formatting and actions, it whips something quickly and dirty:

<div id="container" style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px">
  <div id="first" style=" min-height:100px; min-width:200px; background-color:green">
    <div style="vertical-align:middle">
      first box
    </div>
  </div>
  <div id="second" style=" min-height:100px; min-width:200px;  background-color:yellow">
    <div style="vertical-align:middle">
      second box
    </div>
  </div>
  <svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" height="100%" width: "auto">
		   <!--snipped away svg code-->

	</svg>
  <div id="third" style="min-height:100px; min-width:200px; background-color:red">
    <div style="">
      third box
    </div>
  </div>
  <div id="fourth" style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle ">
    <p>
      fourth box
    </p>
  </div>

</div>
Run codeHide result

As you can see, there are four rectangles around the central svg image. The horizontal centering of the elements inside the “container” div was simple; the vertical centering of the text inside each of the elements was not. Not at all.

I tried various solutions, none of which worked as intended (the text just goes up at the top of the window). Am I missing something obvious or trying to do something impossible?

I am looking for a flexible solution that can work without knowing the exact height in pixels of the boxes or container.

+4
2

flexbox, vertical-align.

, :

  • flex . -, , , .

    div, , . (#first, #second ..), flex .

  • flex , .

    :

    #first { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

#second { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}


#first {
  display: flex;
  justify-content: center;
  align-items: center;
}

#second {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="container" style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px">
  <div id="first" style=" min-height:100px; min-width:200px; background-color:green">
    <div style="vertical-align:middle">first box</div>
  </div>
  <div id="second" style=" min-height:100px; min-width:200px;  background-color:yellow">
    <div style="vertical-align:middle">
      second box
    </div>
  </div>
  <svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" height="100%" width: "auto">
       <!--snipped away svg code-->

</svg>
  <div id="third" style="min-height:100px; min-width:200px; background-color:red">
    <div style="">
      third box
    </div>
  </div>
  <div id="fourth" style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle ">
    <p>
      fourth box
    </p>
  </div>

</div>
Hide result

Re: vertical-align

vertical-align: middle , . , ... line-height. , line-height, .

#third {
    vertical-align: middle;
    line-height: 100px;
}


#first {
  display: flex;
  justify-content: center;
  align-items: center;
}

#second {
  display: flex;
  justify-content: center;
  align-items: center;
}

#third {
  vertical-align: middle;
  line-height: 100px;
}
<div id="container" style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px">
  <div id="first" style=" min-height:100px; min-width:200px; background-color:green">
    <div style="vertical-align:middle">first box</div>
  </div>
  <div id="second" style=" min-height:100px; min-width:200px;  background-color:yellow">
    <div style="vertical-align:middle">
      second box
    </div>
  </div>
  <svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" height="100%" width: "auto">
       <!--snipped away svg code-->

</svg>
  <div id="third" style="min-height:100px; min-width:200px; background-color:red">
    <div style="">
      third box
    </div>
  </div>
  <div id="fourth" style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle ">
    <p>
      fourth box
    </p>
  </div>

</div>
Hide result
+2

:

#container div div, #container div p {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

, :

#container {
    text-align:center;
    border: 5px solid blue;
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:100px;
}
#first {
    min-height:100px;
    min-width:200px;
    background-color:green;
}
#second {
    min-height:100px;
    min-width:200px;
    background-color:yellow;
}
#third {
    min-height:100px;
    min-width:200px;
    background-color:red;
}
#fourth {
    min-height:100px;
    min-width:200px;
    background-color:cyan;
}
#container div div, #container div p {
    position: relative;
	top: 50%;
    transform: translateY(-50%);
    margin: 0;
}
<div id="container">
    <div id="first">
        <div>first box</div>
    </div>
    <div id="second">
        <div>second box</div>
    </div>
    <svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" height="100%" width: "auto">
        <!--snipped away svg code-->
    </svg>
    <div id="third">
        <div>third box</div>
    </div>
    <div id="fourth">
        <p>fourth box</p>
    </div>
</div>
Hide result

, <p>, , margin: 0;, . , .

+1

Source: https://habr.com/ru/post/1613124/

More articles:


All Articles