CODEWITHSUNDEEP
htmlcss
randomuser1
randomuser1

Reputation: 2803

I can't align the div to the center of my webpage

Sorry for trivial question - I have a html code:

<div id="logocontainer">
<div class="liquid-slider" id="slider-1">
    <div>
      <img src="img/s.jpg" alt="a" id="stand-one" />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
    </div>
    <div>
    </div>

and I cannot put this div on the center (aligned horizontally) on my webpage. I have some existing css (since I'm using the java script for liquid-slider) and it's visible in my fiddle. I tried to add 

margin-left:auto;
margin-right:auto;

to here:

.liquid-slider {
  background: #f2f2f2;
  width: 900px;
  float: left;
  overflow: hidden;
}

but that didn't work.. Can you help me with that? Thanks!

Upvotes: 0

Views: 30

Answers (1)

pavel
pavel

Reputation: 27082

You want to center using margin: auto and you have there float: left;.

Remove float, add margin: auto. It should be all you need to do.

.liquid-slider { 
    background: #f2f2f2;
    width: 900px;
    margin: auto;
    overflow: hidden;
}

http://jsfiddle.net/26zq8rt2/1/

Upvotes: 2

Related Questions