CODEWITHSUNDEEP
htmlcss
RichC
RichC

Reputation: 7879

How to center multiple div tags when they are variable width?

I've seen some other posts on this but even using their method on my code doesn't seem to be working for me. What am I doing wrong when trying to center these divs?

This example works fine for me (taken from another SO post).

But this one (which is my code) doesn't behave the same and isn't centered properly.

here is my code that is also in my JSFiddle

.pdf-pageimage-container {
    display: block;
    margin: 0px auto;
    border: 1px solid #EEE;
}


<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
    <img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;">
    <img style="width:792px;height:612px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
    <img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;">
    <img style="width:792px;height:612px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
    <img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:812px;height:792px;">
    <img style="width:812px;height:792px;" />
<div>

Upvotes: 1

Views: 93

Answers (4)

MegaMind
MegaMind

Reputation: 671

you are not ending div tags.

<img>

can work without "/" and to align horizontally in center use 

<div align="center" class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;"></div>

Upvotes: 3

user2600790
user2600790

Reputation: 1

  1. First off I would close the endings of the "div" tags like so just to stay valid with your code.

  2. I'll assume that these divs will stack on top of each other so add this to your "pdf-pageimage-container" css class:

    .pdf-pageimage-container { clear : both; }

  3. If you want the divs to float next to each other one after another you could use this instead

    .pdf-pageimage-container { float : left; }

Hope this helps.

Upvotes: 0

joshkokay
joshkokay

Reputation: 46

Your HTML is incorrect. You are opening <div> tags but not closing them with </div>, so you are opening lots of nesting div elements.

Upvotes: 1

Dropout
Dropout

Reputation: 13866

You can place them in a wrapper div with a fixed width and then center each of them with auto margin.

Let's say that the wrapper has an ID wrapper and the sub-elements all have the class child. In that case you can for example set the following in your CSS

#wrapper{
    width: 800px;
}
.child{
    margin: 0 auto;
}

Upvotes: 0

Related Questions