CODEWITHSUNDEEP
csscss-tables
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Display table and table-cell bug in Chrome

HTML

<div class="circle">
  <div class="content">
      <span><h3>heading</h3><p>slogan goes here</p></span>
  </div>
</div>

CSS

.circle {
  position: relative;
  width: 0;
  height: 0;
  padding: 20%;
  margin: 1em auto;
  border-radius: 50%;
  background: #a7cd80;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
  overflow: hidden;  
}
.content span{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 }
h3{
    line-height: 1px;
}

This code is working only in firefox but not in chrome etc. Text is displaying as table-cell in Firefox but not in others that is text is centered horizontally and vertically in circle only in firefox.

demo

You could see visually this enter image description here

Upvotes: 2

Views: 4710

Answers (3)

Raptor
Raptor

Reputation: 54212

Use <div> to style the content as illustrated in this demo.

Upvotes: 1

Pete
Pete

Reputation: 58432

It is because you have given your .circle a width and height of 0, this means that there is actually no space inside the object and so when you give the width and height of the span as 100%, it's actual width and height will be 0

If you give your circle an actual width and height instead of making the shape using padding then it should work

http://jsfiddle.net/pj3u5/

Upvotes: 3

Sebastian Wąsik
Sebastian Wąsik

Reputation: 65

you have to use different styles for IE and Chrome. Unfortunately, some styles are represented differently in different browsers.

Upvotes: -1

Related Questions