CODEWITHSUNDEEP
htmlcss
Blu Man
Blu Man

Reputation: 21

Put a DIV class in the middle using css

Having some CSS related problem for layout issues. firstly see this screenshot: https://i.sstatic.net/nmw69.png Here i have used css like this:

.image{float:right; padding-top:10px; padding-left:10px; padding-bottom:10px;}
.description{font-size:15px; font-style:italic; padding:10px; color:#5C5C5C; text-shadow:0px 0px 1px #A1A1A1;}
.image, .description{display:block;}
.main-article{clear:both;}

but what i want to do is to display description in the middle. Like this: https://i.sstatic.net/aX2B1.png can you tell me the CSS, to position description class div in the middle like the second image. Thanks

Upvotes: 2

Views: 808

Answers (5)

o_O
o_O

Reputation: 5737

Like GCyrillus said: 

display: inline-block;
vertical-align: middle;

will work. However, you aren't defining a width. So what you will do is:

.image{ width: 300px; padding-top:10px; padding-left:10px; padding-bottom:10px; }
.description{ width: 600px; font-size: 15px; font-style: italic; padding: 10px; color: #5C5C5C; text-shadow: 0px 0px 1px #A1A1A1; }
.image, .description{ display: inline-block; vertical-align: middle; }

Once you change those widths to whatever you need, it will work just fine for you. For good measure, make sure you don't fall victim to the inline-block whitespace bug so either apply:

.image { margin-left: -4px; } //It works sometimes for me but I think it isn't cross-browser very well.

or don't allow any whitespace between your elements in the HTML like so:

<div class="description">
    Lorem Ipsum
</div><div class="image">
    <img />
</div>

Also, if you want to support IE7:

.image, .description { display: inline-block; vertical-align: middle; *display: inline; zoom: 1; }  //Some people don't like the hacks and some people don't like supporting old IE ;-)

Upvotes: 0

hellomello
hellomello

Reputation: 8597

You can set the height of the container around the two items and then set the description to

top: 50%

Here's a fiddle of it

http://jsfiddle.net/andrewliu/mS4pB/1/

UPDATE:

I have modified a bit, you can do some kind of hack where you need do have containers and using margin-top: 50%; and then another container having margin-top: -25%;

http://jsfiddle.net/mS4pB/9/

Upvotes: 0

leoMestizo
leoMestizo

Reputation: 1499

WARNING! This box model is under revision.

I'd use Flexible Box Model or Flexbox.

Just you must put the follow classes in the parent element:

p-flexbox and flex-hcc

Where:

  1. p-flexbox means parent-flexbox
  2. flex-hcc means flexbox-horizontal-center-center

And inside the style you have to put these CSS rules:

.p-flexbox {
   display: -webkit-box;
   display: -moz-box;
   display: box;
}

And another these CSS rules

.flex-hcc {

   -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
           box-orient: horizontal;

   -webkit-box-pack: center;
      -moz-box-pack: center;
           box-pack: center;

   -webkit-box-align: center;
      -moz-box-align: center;
           box-align: center;

}

Here is a example: http://jsfiddle.net/GnbZD/1/

Cheers, Leonardo

Upvotes: 1

ponysmith
ponysmith

Reputation: 427

Add a wrapper around the description and image and use display: table

#container { 
    display: table;
}
#container .image, #container .description {
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 106008

Basicly it will be : 

.description, .image {
    display:inline-block;
    vertical-align:middle;
}

Upvotes: 2

Related Questions