homepage Welcome to WebmasterWorld Guest from 54.166.100.8
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Centre div vertically and horizontally
greencode




msg:4622548
 4:09 pm on Nov 11, 2013 (gmt 0)

I think I'm going mad as I'm sure I've done this successfully before!

I have a div containing text and an image. I need both image and text centred within the containing div.

I have this so far…

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
display: table;
width: 300px;
position: relative;
}
.content {
display: table-cell;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body class="">
<div class="container">
<div class="content">
Unknown stuff to be centered.
</div>
<img src="image.jpg" height="300px" width="300px" alt="" />
</div>
</body>
</html>

The thing is as this is a responsive site I won't always know the height of the containing div.

Any help would be greatly appreciated.

 

brandozz




msg:4622553
 4:18 pm on Nov 11, 2013 (gmt 0)

Your image is outside of you .content div where you are calling "text-align: center". Move your image into that div.

greencode




msg:4622554
 4:22 pm on Nov 11, 2013 (gmt 0)

Unfortunately that doesn't work. That just adds the the image into that div and pushes the text above it and nothing centres.

brandozz




msg:4622572
 5:48 pm on Nov 11, 2013 (gmt 0)

Not sure why id doesn't work for you. Seems to work for me across all browsers.

You are trying to display and center align text on top of an image correct?

greencode




msg:4622584
 6:52 pm on Nov 11, 2013 (gmt 0)

I'm trying to align the text in the containing div both horizontally and vertically. If it works for you, can you add the code to this thread please.

brandozz




msg:4622617
 9:01 pm on Nov 11, 2013 (gmt 0)

I didn't change your code above, I just moved the image into the .content div.

Are you trying to display the text to the left and the image to the right with the text aligned with the images center?

greencode




msg:4622618
 9:06 pm on Nov 11, 2013 (gmt 0)

Hi, no. I am trying to have the image and then the text overlaying the image centred vertically and horizontally. So the text is completely centred in the containing div. I.e. everything's centred in the containing div, image and text.

brandozz




msg:4622622
 9:16 pm on Nov 11, 2013 (gmt 0)

oh, you could do this:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
background: url(img/glyphicons-halflings.png) center no-repeat;
width: 300px;
height: 300px;
}
.content {
text-align: center;
padding-top: 150px;
}
</style>
</head>
<body class="">
<div class="container">

<div class="content">Unknown stuff to be centered.</div>


</div>
</body>
</html>

greencode




msg:4622625
 9:21 pm on Nov 11, 2013 (gmt 0)

Thanks but I will not always know the height of the container. This is a responsive site and therefore the height of the image will be set to auto.

lucy24




msg:4622663
 4:12 am on Nov 12, 2013 (gmt 0)

I am trying to have the image and then the text overlaying the image

For an overlay you are better off using background. In html 5 you can set the background to "contain" or "cover" as needed. You can then get rid of all "position" factors. Or do you need the image to appear explicitly in the html?

My version (the border is just for illustration) goes

.container {
display: table;
width: 300px;
height: 300px;
/* position: relative; */
background: url("image.jpg");
border: 1px solid blue;
}
.content {
display: table-cell;
text-align: center;
vertical-align: middle;
/* position: absolute;
width: 100%;
height: 100%; */
}

and

<div class="container">
<div class="content">
Unknown stuff to be centered.
</div>
<!-- <img src="image.jpg" height="300px" width="300px" alt=""> -->
</div>

Displays as intended in SubEthaEdit preview (webkit), Camino (mozilla) and Opera 12 (presto).

brandozz




msg:4622665
 4:14 am on Nov 12, 2013 (gmt 0)

This will work if you text is a consistent number of lines.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
width: 300px;
}
.content {
text-align: center;
width: 100%;
}

</style>
</head>
<body class="">
<div class="container">

<div class="content">
Unknown stuff to be centered.
<img src="img.png" width="300" height="300">
</div>

</div>
<div class="test-div"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var getImageHeight = $("img").attr("height");
var setPadding = getImageHeight/2
$(".content").css("padding-top", setPadding);
$("img").css("margin-top", -setPadding);
</script>
</body>
</html>

greencode




msg:4622678
 7:26 am on Nov 12, 2013 (gmt 0)

Hi, thanks but the text won't be consistent, it could be less or more three lines of copy. It needs to be adaptable.

lucy24




msg:4622728
 10:43 am on Nov 12, 2013 (gmt 0)

It needs to be adaptable.

http:/ /www.w3.org/TR/css3-background/#the-background-size
(intentionally de-linked to preserve fragment)

An ‘auto’ value for one dimension is resolved by using the image's intrinsic ratio and the size of the other dimension, or failing that, using the image's intrinsic size, or failing that, treating it as 100%.

If both values are ‘auto’ then the intrinsic width and/or height of the image should be used, if any, the missing dimension (if any) behaving as ‘auto’ as described above.

I goofed before and said "html 5" when of course I meant css 3. Oops. But if you don't say anything about "background-size", it defaults to what is now called "auto". But don't say 100%; that refers to the containing area, not the image itself.

greencode




msg:4622731
 10:49 am on Nov 12, 2013 (gmt 0)

Sorry, not too sure what you mean?!

I've been hunting around this morning and think I've found a solution. I've not tested cross-browser as yet though: [codepen.io...]

brandozz




msg:4622778
 1:13 pm on Nov 12, 2013 (gmt 0)

I ran the codepen on IE 10 and 9 and it doesn't look too good. Let us know how it goes.

brandozz




msg:4622784
 2:11 pm on Nov 12, 2013 (gmt 0)

If that solution doesn't work for you I've adjusted my jquery solution. It grabs the computed height of the container div instead of the image. This should adjust to variable text heights.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
width: 300px;
}
.content {
text-align: center;
width: 100%;
}

</style>
</head>
<body class="">
<div class="container">

<div class="content">
<div class="text">Unknown stuff to be centered. Here is some more text that tests to see if the div expands. Here is even more text that stretches the div height</div>
<img src="img.png" width="300" height="300">
</div>
</div>

<script src="jquery"></script>
<script type="text/javascript">
var getContHeight = $(".container").outerHeight();
var getTextHeight = $(".text").outerHeight();
var adjustPad = getTextHeight/2
var setPadding = getContHeight/2
$(".text").css("margin-top", -adjustPad);
$(".content").css("padding-top", setPadding);
$("img").css("margin-top", -setPadding);
</script>
</body>
</html>

greencode




msg:4622785
 2:16 pm on Nov 12, 2013 (gmt 0)

Thanks for your help with this - really appreciate. I'll test this in the next couple of days - feel as though I need a break from this particular project!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved