网站：如何将所有屏幕尺寸的div居中

Question

I want to fix my header div which has two components. An Image and the title of the page as shown in the figure:

The image shown below is on MDPI screen.

Here is my Code

 #headerdiv { font-size: 4em; font-weight: bold; line-height: 60px; padding: 1% 0; margin: auto auto; } .headerdiv>#leftheaderdiv { min-height: 750px; text-align: center; } 

 <div class="headerdiv"> <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="leftheaderdiv"> <img src="http://lorempixel.com/200/200/sports" id="mainlogo" /> </div> <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="leftheaderdiv"> <p id="headerdivp">TXYZ RD MEDIA</p> </div> </div> 

It looks like this on a mobile screen, which is fine as per the bootstrap arrangement:

The problem I am facing is on HDPI screen where the header looks like this. The text goes on the top. :

How Can I make sure that the right div also occupies 100% height / fills the right part and the text is always in the middle no matter what screen size?

Thank you!

Answer 1

Solution 1:

You can use flex to align the text in vertically center. Add the following CSS in your paragraph parent element like below.

.headerdiv > #leftheaderdiv{
  min-height: 750px; 
  display: flex;
  align-items: center;
  text-align: center;
 }

Solution 2:

If you don't want to use flex you can use the old method like make your parent as table and child element as table-cell .

 #headerdivp{
    font-size: 4em; 
    font-weight: bold;
    line-height: 60px; 
    padding: 1% 0; 
    display:table-cell;
    vertical-align:middle;
    margin: auto auto;
  }

 .headerdiv > #leftheaderdiv{
    min-height: 750px; 
    display:table;    
    text-align: center;
 }

Answer 2

Try to use flex ..

For vertical align center use align-items:center .

And for mobile stacked view use flex-direction:column using media query.

Stack Snippet

 #headerdivp { font-size: 4em; font-weight: bold; line-height: 60px; } .headerdiv>#leftheaderdiv { text-align: center; } .headerdiv { display: flex; align-items: center; } @media (max-width:768px) { .headerdiv { flex-direction: column; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container"> <div class="headerdiv row"> <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="leftheaderdiv"> <img src="http://lorempixel.com/200/200/sports" id="mainlogo" /> </div> <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="leftheaderdiv"> <p id="headerdivp">TXYZ RD MEDIA</p> </div> </div> </div> 

Reference Link

• flex
• flex-direction
• align-items

Answer 3

You are missing row class. Also add class align-items-center . Also also have id leftheaderdiv twice. Make it unique.

<div class = "row headerdiv align-items-center">               
            <div class = "col-lg-6 col-md-12 col-sm-12 col-xs-12" id = "leftheaderdiv">
                <img src="https://s3-us-west-1.amazonaws.com/xesdcf/xdclogo3d2.svg" id = "mainlogo"/>
            </div>
            <div class = "col-lg-6 col-md-12 col-sm-12 col-xs-12" id = "leftheaderdiv">
                <p id = "headerdivp">TXYZ RD MEDIA</p>              
            </div>
</div>