Centre div vertically and horizontally

Forum Moderators: not2easy

Message Too Old, No Replies

Centre div vertically and horizontally

greencode

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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!