center div css

By | February 15, 2017

center div css Focusing components vertically with css is something that regularly gives designers inconvenience. There are however an assortment of strategies for vertical & horizontal focusing  and each is genuinely simple to utilize.

1. Inline Center CSS

 
You can center inline elements horizontally, with all content set  horizontally center in div.

.inline-center {
  text-align: center;
}

2. horizontally align  block level element

You can center block level  element with this css.
.center-margin {
  margin: 0 auto;
}

3. horizontally align   more than one block level element

You can center all block level  element with this css.
.nav ul li{
  display: inline-block;
  text-align: center;
}

Center a box on a page both vertically and horizontally

<div class="box">
<div class="box-container">
<div class="content">
<h1>
horizontal align css </h1>
The code above has been tested with IE 6 to 11, Firefox, Chrome, Vivaldi, Opera and Safari..</div>
</div>
</div>

 

.box {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.box-container {
    display: table-cell;
    vertical-align: middle;
}

.content {
    margin-left: auto;
    margin-right: auto; 
    width:500px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *