Centre a div over an img

I have a gallery of images, all 210px width, but with various heights.

I want to place over each image a div box that contains the words "coming soon", has a solid background colour, is 30px high, width would be unknown. the div box needs to be centred vertically and horizontally.

How do i go about this in CSS?

I've googled, tried everything i can think of, haven't found a solution at all..

-------------Problems Reply------------

Instead of using image tags, could you perhaps use a bunch of DIVs with the gallery images as a background image? Then inside that DIV, just put your text and style it however you need.

You could make a CSS class with the text styling, width, etc. Then just use the style attribute in the DIV to set the background-image and height.

The answer by Patrick is certainly a good way to go, saving on some markup.

But if you can't or prefer not to make the images a background of a container, you could instead use some positioning options. For instance, if you can live with a fixed width on the "coming soon" part, you could do something like this:

ul {
list-style: none;
margin: 0 0 0 -2em;
padding: 0;
}

li {
position: relative; /* this makes it a containing block */
float: left;
margin: 0 2em 2em 0;
padding: 0;
}

.msg {
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px; /* assuming it's 30 pixels high, half */
margin-left: -75px; /* assuming it's 150 pixels wide, half */
width: 150px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
background: rgba(0,0,0,.8); /* almost black, f**k old browsers */
}

HTML

<ul>
<li>
<img src="/images/meep.png" alt="" />
<div class="msg">Coming soon.</div>
</li>
</ul>

Note that the line-height: 30px is so the text will be vertically centered in the container, and this is actually bad if the message needs to go down to a second line. In that case, you need to ditch the fixed height of the container, maybe add some padding, and then use a more traditional line height like 1.2em. In that case though, you'll need some jQuery or something to calculate the height of the parent container in order to get the right "top: px" height.

Category:html Views:0 Time:2011-06-06
Tags: html css

Related post

  • CSS centre a div with nested divs to the true center of the Browser without specifying widths 2011-04-15

    OMG, Really I've been here a thousand times before. I am so going to snippet this answer. I cannot believe how hard it is to do something as easy as this. <body> <div class="wrapper"> <div class="class1">Page 1 of 1</> <div

  • Vertical centre a div on a page 2010-12-03

    I have a question. I want to align a div on the vertical centre off the browser viewport. I understand how to do this and have written some code myself. But there is one thing that does not work: // fetch al info I need var windowHeight = $(window).h

  • Vertically centre a div 2011-03-03

    I want to vertically centre the submenu on this page in between the two lines. http://complete.sanscode.com/Landscape. See the part that says Master Planning | Park... etc. I'd like to use jquery to centre that. Does anyone know how? Edit: The menu c

  • Centre aligned div, that has text aligned to the left 2009-11-21

    I want that div in the middle of the page, the div should be 561px and the text needs to be left aligned. <div id="notes"> aaaaaaaaa a aaaaaaa aaaaaaaaa </div> --------------Solutions------------- Two things. Firstly: #notes { width: 561p

  • DIV disappears on IE7 and IE6 when using margin 'auto' in a DIV inside li item 2009-11-05

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css" me

  • left div + right div + center div = 100% width. How to realise? 2010-07-05

    I have three divs and one main div: <div id="container" style="width:100%;"> <div id="left" style="width:201px; float:left;"> .... </div> <div id="centre" style="float:left;"> .... </div> <div id="right" style="width:

  • divs being messed up when using relative position and using the auto center method 2010-10-12

    i am trying to get my site to auto center a div that has a bunch of divs inside of it on the page by using a set width and defining a margin of 0 auto; if i set my inner div elements to absolute positioning everything lines up properly but it doesn't

  • resize div width on window resize 2011-04-08

    For a site I'm building now the logo has a centered font with two white lines coming off and extending to the edge of the window, regardless of the window size. I figured out that the easiest way to do it is to get javascript (through jquery) to resi

  • Spans and div elements won't center and margin-top/bottom won't work 2011-12-04

    This is a problem that occurs a lot, and I usually do solve it in a variety of ways that don't work for another method. I was wondering if there was a universal method to center: <div> <span>content</span> <span> content</s

  • Viewport centring on large website 2012-02-22

    Im trying to build a horizontal website which is at 16000px at the moment, using this template http://tympanus.net/Tutorials/WebsiteScrolling/ the website has four sections 4000px wide each, I am trying to achieve a div that will be centred in the br

  • How to horizontally center a modal div even after the browser is resized? 2012-04-17

    I m trying to add an item to the DOM using jquery. I want it to overlay on top(z-index) of all other content (there are hundreds of z-indices set already) and it should be center aligned at all times. While adding this div to the DOM, i m setting its

  • CSS Center Div - Problems 2012-04-22

    I am currently working on a simple site but i need to centre a div in the middle of the screen that will adapt to different browser sizes. I have nearly got it to work but not quite could someone instruct me where I am going wrong. The live site to l

  • Jquery Get width not working in IE6 or IE7 2009-08-26

    I have a div called #whatnewstoggler and it's width changes dynamically. This causes problems because I cannot centre this horizontally. The only way is to get the width and add inline css dynamically using jquery. The js works in all browsers apart

  • Three Column OverFlow Layout 2010-02-05

    I'm looking for some help with my CSS layout. I can't seem to get it how i want. Here is an image of what i am looking for. I can't get div2 to fill its' section with the overflow being visible to the bottom of the left column. Here is my code that i

  • CSS layout that fills available space 2010-03-29

    I'm trying to do a seemingly simple webpage layout, but I'm hitting a wall. I'd like to do everything purely with CSS (no tables to muck things up, and no javascript dynamically resizing things) I'd like to have: A heading with a fixed height A foote

  • How to properly align textboxes on a webpage with labels 2010-05-09

    this is a CSS / design question. I have three textboxes that i want to be center aligned on a web page. Then i want a label description to the right of each one. When i use attribute like text:align:centre because the labels are of different length i

  • CSS Floating Pop Up: Tricky CSS Positioning 2010-08-24

    I have a website that, upon clicking a link generates a div. Allow me to explain a little deeper. I have a table of "pages" in my CMS and I've added the ability to add new pages through a little popup div. My pop-up div is defined below the table, bu

  • Website Page Layout Width 2010-10-16

    I have designed the home page for my website. Now only specifing the with is remaining. After debating a lot, i decided to go with a fixed page layout. How do i do that? How do I put everything within 750px (or whatever you suggest)? --------------So

  • Vertical alignment with CSS 2011-01-20

    Yeah, yeah, I know this is yet another question about vertical alignment with CSS and it's been done a million times before. Rest assured that I have come across this problem many times and I've already done the reading about various ways to centre v

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.103 (s). 11 q(s)