Home/ Questions/Q 8502299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T01:26:46+00:00

I want to to have content like below for this first one I used

  • 0

I want to to have content like below

1
for this first one I used line-height 40px

enter image description here
for the second one I used line-height 120px

This means as content varies I have to change the line-heights
Is there any way to make this type of centering in a fixed dimensional div without
changing the class

Can I do this without Javascript ?
If I use height as 120px I am getting div s like this ( I dont want this )
enter image description here

style of the div is

<style>
 .rectangle {
        postion:absolute;
    box-shadow: 10px #333;
    border-radius: 23px;
    border-top-right-radius: 0;
    border:6px solid;
    block:inline;
    line-height: 123.6px;
    width:200px;
    background-color: #444;
    float: left;
    margin: 5px;
    text-align: center;
    color:white;
   font-weight:900;

    text-decoration:none;
}
</style>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Vertical centring is tricky. Chris Coyier at CSS tricks has a great article on this – http://css-tricks.com/centering-in-the-unknown/

    My personal preference is the ghost pseudo element, but it’s only viable in IE8+ so you may need to look at some of the other examples if legacy IE support is necessary.

    Here’s a working fiddle – http://jsfiddle.net/tommarshall/eGJQC/3/

    • 0