CODEWITHSUNDEEP
htmlcssvertical-alignmentcentering
dash167
dash167

Reputation: 115

Vertically center content for different browser windows

I'm having an issue getting two side by side divs vertically centered on my site. It's a logo with a paragraph of text next to it and I'm wanting them to be horizontally and vertically centered but I can't figure it out for this particular case. I've attached a fiddle and a link to the actual site below.

HTML:

<div class="content">
   <div class="left">
      <img src="images/mark.png" alt="Civilians Stamp"/>
   </div>
   <div class="right">
      <p>Civilians is a Cape Town based film collective creating original content across multiple platforms.</p>
      <p>The collective is made up of Writers, Directors & Producers creating original content for film and television. </p>
   </div>
</div>

CSS:

.content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.left {
    float: left;
    width: 30%;
    margin: 0 auto;
    padding-top: 20%;
    padding-left: 10%;

}

.left img {
    max-width: 200px;
    width: 100%;
    float: left;
}

.right {
    float: right;
    width: 50%;
    margin: 0 auto;
    margin-right: 10%;
    margin-top: 19.2%;
}

.right p {
    font-family: 'proxima-nova', sans-serif;
    font-weight: 500;
    line-height: 210%;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: justify;
    float: left;
}

http://jsfiddle.net/wfx7srea/

http://civilians.co.za/home.html

Any help getting this to work would be great!

Upvotes: 0

Views: 53

Answers (2)

Nealime
Nealime

Reputation: 169

I changed these 3 pieces of CSS to horizontally and vertically align content.

.content {
    width: 825px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.left {
    float: left;
    margin: 0 auto;
    text-align: right;
}

.right {
    float: left;
    width: 75%;
    margin: 0 auto;
}

This is the end result: https://jsfiddle.net/wfx7srea/3/

The downside of this method is that you need to use a fixed width and height for the centered element.

Upvotes: 3

Jozef Mikul&#225;š
Jozef Mikul&#225;š

Reputation: 71

I am not exactly sure what layout you are trying to archieve, but following example could be enough for you to start.

I am using CSS table for centering.

https://jsfiddle.net/wfx7srea/1/

.content {
  display: table;
}
.left {
  display: table-cell;
  vertical-align: middle;
}

Upvotes: 0

Related Questions