Center the div vertically

Question

Center the div vertically

How can I vertically center a div next to a tall image using CSS? The left column (#watch) is an image and the right column (#watch-column) is a div that needs to be centered. I've tried different methods but nothing seems to work with my somewhat fluid website design. Any suggestions?

<section id="time-keeper-overview-id">
   <div class="row" id="watch-parent">
      <img id="watch" src="img/watch.png" class="img-responsive" alt="Responsive image">
      <div id="watch-column">
         <div id="time-keeper-description">
            <p>Insert paragraph of text here</p>
         </div>
         <img id="bus-stop-waves" src="img/bus-stop-waves.png" class="img-responsive" alt="Responsive image">
      </div>
   </div>
</section>

#watch {
  float: left;
  max-height: 100% !important;
  padding-right: 4%;
}

#watch-column {
  vertical-align: middle !important;
  overflow: hidden;
}

See the full site at

html css

Answer 1

Answer №1

To achieve the desired layout, you will need to specify a height for the inner container. For your specific situation, it's best to set a height for #time-keeper-description and adjust other styles on the outer container. Consider adding the following CSS:

#time-keeper-description {
    height:500px; /* adjust as needed */
}

#watch-column {
    position: absolute;
    top: 50%;
    margin-top: -250px; /* half of #time-keeper-description height */
}

If setting a fixed height is not possible, consider using the following CSS on your div:

display: table-cell;
vertical-align: middle;

I hope this solution works well for your design! :)

Answer 2

To achieve the desired layout, you will need to specify a height for the inner container. For your specific situation, it's best to set a height for #time-keeper-description and adjust other styles on the outer container. Consider adding the following CSS:

#time-keeper-description {
    height:500px; /* adjust as needed */
}

#watch-column {
    position: absolute;
    top: 50%;
    margin-top: -250px; /* half of #time-keeper-description height */
}

If setting a fixed height is not possible, consider using the following CSS on your div:

display: table-cell;
vertical-align: middle;

I hope this solution works well for your design! :)

Answer 3

Answer №2

When utilizing css properties like display: table-cell; for table displays using divs or containers, I have observed that it allows for effective vertical alignment.

display: table-cell;
vertical-align: middle;

Additionally, setting the css line-height property with a specific value enables vertical-align: middle; to function properly.

For further information, you can refer to this resource: http://css-tricks.com/centering-in-the-unknown/

Although Flex Box also supports this type of alignment, it may not be compatible with older browsers that do not automatically update, also referred to as "Ever Green" browsers -

For guidance on Flex Box Vertical Alignment, visit:

Another approach is to utilize position attributes in css such as relative and absolute, then specify top: 50%; However, the best method depends on the design and requirements that align with your project.

Answer 4

When utilizing css properties like display: table-cell; for table displays using divs or containers, I have observed that it allows for effective vertical alignment.

display: table-cell;
vertical-align: middle;

Additionally, setting the css line-height property with a specific value enables vertical-align: middle; to function properly.

For further information, you can refer to this resource: http://css-tricks.com/centering-in-the-unknown/

Although Flex Box also supports this type of alignment, it may not be compatible with older browsers that do not automatically update, also referred to as "Ever Green" browsers -

For guidance on Flex Box Vertical Alignment, visit:

Another approach is to utilize position attributes in css such as relative and absolute, then specify top: 50%; However, the best method depends on the design and requirements that align with your project.

Answer 5

Answer №3

After receiving insights from various sources, I have come up with a solution for my own question. I appreciate all the input!

In this particular scenario, utilizing Flexbox proved to be the most effective approach. This was especially useful when dealing with an image that needed to fill the viewport height while maintaining a fluid design. By using flex: 0 0 auto; in conjunction with max-height: 100%;, I was able to achieve the desired outcome.

#view-container {
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;

   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-align-items: center;
   align-items: center;
}

#image {
   max-height: 100%;
   -webkit-flex: 0 0 auto;
   -moz-box-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   padding-right: 4%;
}

Answer 6

After receiving insights from various sources, I have come up with a solution for my own question. I appreciate all the input!

In this particular scenario, utilizing Flexbox proved to be the most effective approach. This was especially useful when dealing with an image that needed to fill the viewport height while maintaining a fluid design. By using flex: 0 0 auto; in conjunction with max-height: 100%;, I was able to achieve the desired outcome.

#view-container {
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;

   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-align-items: center;
   align-items: center;
}

#image {
   max-height: 100%;
   -webkit-flex: 0 0 auto;
   -moz-box-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   padding-right: 4%;
}

Center the div vertically

Answer №1

Answer №2

Answer №3

Similar questions

Align audio and video elements in HTML5 using JavaScript

Can you please elaborate on how the CSS properties: -webkit-border-radius and border-radius are utilized?

JQueryMobile 1.3.2 encounters issues with popups following the installation of Chrome version 43.0.2357.65 m update

I have configured my CSS styles in the module.css file of my Next.js application, but unfortunately, they are not being applied

Subsequent line in hta/html

Executing a function upon loading a page triggered by a submitted form

Animating range tick movements as the range thumb moves

Adding animation to the initial loading process of a Vue application

Use the controller to set the body's background image

Unique Soundcloud visualization using webglonDeletegist

Transitioning the <mat-icon> from one <mat-form-field> to another may not always result in the icon being updated consistently

Clicking on the background does not alter the onclick function

Preventing links from functioning on dynamically generated web pages

What is the best way to dynamically assign a random file from a folder as the background image using CSS property in JavaScript?

Node.js causing issues with executing jQuery front-end code properly

Adding additional text within the paragraph will result in the images shifting backwards when utilizing flexbox

Tips for resolving the issue of concealing content underneath a preceding element via CSS

Getting rid of the upper boundaries and outlines of the Bootstrap table

The horizontal scrolling feature will not activate

Slick.js integrated with 3D flip is automatically flipping after the initial rotation