CSS Tag's will not show in center of page

Question

I'm a css newbie and I am using DRUPAL (CMS) to design my site. I have been able to center a image by using this tag:

#block-imageblock-4{
    width:25.5%;
    height:10%;
    text-align:center;
    margin-top:1%;
    margin-bottom:1%;
    margin-left:37%;
    margin-right:36.5%;
}

So if the screen resolution is 1366px768px(max #page) or larger #block-imageblock-4 stays in the center of the page.

WELL on another page I have two images with two tags. I used this CSS to place them side by side.

#block-imageblock-17,#block-rotating-banner-1{
    display:block;
    width:auto;
    margin-left:2%;

}

There respective tags:

#block-imageblock-17{
    width:15%;
    float:left;
    margin-top:1%;
    margin-left:3%;
    margin-right:1.5%;
    margin-bottom:5%;
}

#block-rotating-banner-1 {
    margin-right:-30%;
    margin-top:1%;
    margin-bottom:10%;
    float:left;
    background-repeat:no-repeat;
    width:26%;
    height:180px;
    max-width:100%;
    min-height:100%;
    background-image:url("/sites/default/files/imgs/ArtistFrame.png");
}

However if the screen resolution is larger than 1366px by 768px then the images are not centered. and thats my problem.

I have noticed that if I take out all float and margins out of both tags and put both elements like this:

#block-imageblock-17,#block-rotating-banner-1 {
    display:block;
    width:auto;
    text-align:center;
    margin-top:1%;
    margin-bottom:1%;
    margin-left:37%;
    margin-right:36.5%;
}

the two images ARE CENTERED, BUT NOT next to each other.

Any suggestions to get both images side by side and in the center of the page like tag #block-imageblock-4 ?

possible duplicate of [Center image element in parent div](http://stackoverflow.com/questions/18428997/center-image-element-in-parent-div) — Hashem Qolami, Jan 20 '14 at 23:28
Why did you edit tag? I am creating this site with Drupal. There for the drupal tag should be applied — Benjamin Jones, Jan 21 '14 at 01:17
This is a CSS issue definitely, it has nothing to do with any content management system such as drupal. — Hashem Qolami, Jan 21 '14 at 01:33

score 0 · Answer 1 · answered Jan 20 '14 at 23:25

0

Try wrapping the images in a <div> tag and centering the div using margin: 0 auto; . Something like this

CSS

 .centerDiv { margin: 0 auto;}

HTML

<div class="centerDiv">
<img src="urlhere" />
...
</div>

answered Jan 20 '14 at 23:25

Auzi

337
3
13

.centerDiv needs to have its width explicitly defined – Douglas Denhartog Jan 20 '14 at 23:38
If you have access to the site template, you can modify the html block and add the div html to surround the block. (Assuming you are doing it in a block). If I remember correctly, it should be the `.tpl.php` files but it has been a while. Other than that, you would just need to update the CSS with the correct centering markup and not the % based markup you are currently using. – Auzi Jan 21 '14 at 17:48

score 0 · Answer 2 · answered Jan 20 '14 at 23:31

0

try this:

img {
   height: 250px;
   left: 50%;
   margin-top: -125px;
   margin-left: -125px;
   position: absolute;
   top: 50%;
   width: 250px;   
}

and more here:

http://www.paulund.co.uk/absolute-center-images-with-css

answered Jan 20 '14 at 23:31

wpdaniel

714
8
25

score 0 · Answer 3 · answered Jan 20 '14 at 23:36

0

div
{
    margin: 0 auto;
    width: 100px;
}
img
{
    width: 100px;
}

the width of an element with "margin: 0 auto;" needs to have its width EXPLICITLY defined. See JSFiddle

answered Jan 20 '14 at 23:36

Douglas Denhartog

2,036
1
16
23

CSS Tag's will not show in center of page

3 Answers3