CODEWITHSUNDEEP
htmlcss
TDP
TDP

Reputation: 97

How do I align these divs horizontally in the center?

I have an image, ul list and another image all in line within a div and I want them all centered horizontally and vertically and I want them to fall below each other when the screen gets smaller i.e. mobile friendly. Does anyone know the solution to this? Here's an image for reference:

enter image description here

HTML: 

<div class="more">

  <div id="social-logo">
    <a href="https://drinkaware.co.uk"><img src="" alt="" width="200" height="200"></a>
  </div>

    <ul class="about">
      <li class="a-links">
        <div id="about-links" class="site-content">
          <ul class="aboutli">
            <li><a target="_blank" href="#">About Us</a></li>
            <li><a target="_blank" href="#">FAQ's</a></li>
            <li><a target="_blank" href="#">Contact Us</a></li>
            <li><a target="_blank" href="#">Work With Us</a></li>
            <li><a target="_blank" href="#">Terms and Conditions</a></li>
            <li><a target="_blank" href="#">Privacy Policy</a></li>
          </ul>
        </div>
      </li>
    </ul>

    <div id="drinkaware" class="site-content">
      <a href="https://drinkaware.co.uk"><img src="/Applications/MAMP/htdocs/D0.1/images/drinkawarered.png" width="200" height="auto"></a>
    </div>

</div>

CSS:

.more {
  height: 300px;
  background-color: #e6e6e6;
  border-top: 1px solid #000000;
}
#social-logo {
  display: inline-block;
  margin-left: 200px
}
ul.about {
  width: 160px;
  height: 184px;
  display: inline-block;
  border: 1px solid #000000;
  list-style-type: none !important;
  list-style-position: inside;
  text-align: center;
  text-decoration: none;
  line-height: 0.8cm;
  padding: 0px;
}
ul.aboutli {
  color: #000000;
  font-size: 12px;
  border: 1px solid yellow;
  padding: 0px;
  text-decoration: none;
  list-style-type: none !important;
}

#drinkaware {
  display: inline-block;
  top: 100px;
}

Upvotes: 0

Views: 52

Answers (2)

E.Agolli
E.Agolli

Reputation: 550

Apply this html by adding a wrapper:

<div class="wrapper">
<div class="more">

  <div id="social-logo">
    <a href="https://drinkaware.co.uk"><img src="" alt="" width="200" height="200"></a>
  </div>

    <ul class="about">
      <li class="a-links">
        <div id="about-links" class="site-content">
          <ul class="aboutli">
            <li><a target="_blank" href="#">About Us</a></li>
            <li><a target="_blank" href="#">FAQ's</a></li>
            <li><a target="_blank" href="#">Contact Us</a></li>
            <li><a target="_blank" href="#">Work With Us</a></li>
            <li><a target="_blank" href="#">Terms and Conditions</a></li>
            <li><a target="_blank" href="#">Privacy Policy</a></li>
          </ul>
        </div>
      </li>
    </ul>

    <div id="drinkaware" class="site-content">
      <a href="https://drinkaware.co.uk"><img src="/Applications/MAMP/htdocs/D0.1/images/drinkawarered.png" width="200" height="auto"></a>
    </div>

</div>
</div>

And this css:

.more {
  height: auto;
  background-color: #e6e6e6;
  border-top: 1px solid #000000;
  margin: 0 auto;
  width: 80%;
}
#social-logo {
  display: inline-block;

}
ul.about {
  width: 160px;
  height: 184px;
  display: inline-block;
  border: 1px solid #000000;
  list-style-type: none !important;
  list-style-position: inside;
  text-align: center;
  text-decoration: none;
  line-height: 0.8cm;
  padding: 0px;
}
ul.aboutli {
  color: #000000;
  font-size: 12px;
  border: 1px solid yellow;
  padding: 0px;
  text-decoration: none;
  list-style-type: none !important;
}

#drinkaware {
  display: inline-block;
  top: 100px;
}

.wrapper
{
    width: 100%;
    text-align: center;
    background-color: #e6e6e6;
}

You have to put the height: auto or use % for it in div with more class if you want it responsive.

Upvotes: 1

S.V.
S.V.

Reputation: 1221

Using bootstrap, here's a tiny example to get the responsive layout you want: http://jsfiddle.net/jb0Ly020/

HTML

<div class="row">
  <div class="col-sm-4 col-xs-12">
    123
  </div>
  <div class="col-sm-4 col-xs-12">
    456
  </div>
  <div class="col-sm-4 col-xs-12">
    789
  </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

To get all your elements to the same height, I would set their height to 100% of a containing outer div, whose height you can manually set.

Upvotes: 2

Related Questions