Welcome to WebmasterWorld Guest from 107.20.108.136

Forum Moderators: not2easy

Message Too Old, No Replies

Centre div vertically and horizontally

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

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 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.
4:18 pm on Nov 11, 2013 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0


Your image is outside of you .content div where you are calling "text-align: center". Move your image into that div.
4:22 pm on Nov 11, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 0


Unfortunately that doesn't work. That just adds the the image into that div and pushes the text above it and nothing centres.
5:48 pm on Nov 11, 2013 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 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?
6:52 pm on Nov 11, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 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.
9:01 pm on Nov 11, 2013 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 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?
9:06 pm on Nov 11, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 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.
9:16 pm on Nov 11, 2013 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 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>
9:21 pm on Nov 11, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 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.
4:12 am on Nov 12, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:12994
votes: 287


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).
4:14 am on Nov 12, 2013 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 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>
7:26 am on Nov 12, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 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.
10:43 am on Nov 12, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:12994
votes: 287


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.
10:49 am on Nov 12, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 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...]
1:13 pm on Nov 12, 2013 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0


I ran the codepen on IE 10 and 9 and it doesn't look too good. Let us know how it goes.
2:11 pm on Nov 12, 2013 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 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>
2:16 pm on Nov 12, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 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!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members