CODEWITHSUNDEEP
htmlcsscross-browsercross-platform
Naemy
Naemy

Reputation: 536

Centering text vertically in button

It should be simple to center text in a button. Unfortunately, across different browsers and platforms, I get different results.

I've tried for hours to fix it, but nothing works everywhere.

Chrome, mac OS X:


(source: d.pr)

Chrome, Windows 8


(source: d.pr)

IE 10, Windows 8


(source: d.pr)

So, yeah. The big block doesn't appear in IE if I set a defined height, but I don't get why it breaks down in the first place.

Here's the code:

.btn-call-to-action {
  background: #8e8287;
  margin-bottom: 15px;
  color: #f5f3e2;
  padding: 3px 18px 3px 10px;
  margin-top: 6px;
  display: inline-block;
  position: relative;
  border-bottom: none;
  border-radius: 2px;
  white-space: nowrap;

.btn-call-to-action a:after {
  content: url('../img/general-white-arrow.svg?1369574895');
  position: absolute;
  width: 35px;
  right: 15px;
  top: 0px; }

and the HTML (pretty simple) :

<a href="about.html" class="btn-call-to-action">Want more ?</a>

and the site: http://aurelieremia.be/tfa/

// edit: I think I get it. Still not centered in windows but by resetting the line height, the button looks a bit more normal. IE problem resolved, I'll try using a background-image instead (thanks Ana)

Upvotes: 3

Views: 208

Answers (3)

Octavian
Octavian

Reputation: 494

How about something like this:

HTML:

    <a href="about.html">
        <div class="btn-call-to-action">
            <span>Want more?  <img src="http://bkids.sisuweb.co/wp-content/uploads/2013/04/postArrowR.png" />
            </span>
        </div>
    </a>

CSS:

    .btn-call-to-action{
        width:160px;
        height:80px;
        background: #8e8287;
        padding: 3px 18px 3px 10px;
        margin:8px;
        color: #f5f3e2;
        border-radius: 2px;
        display:table;
        text-align:center;
    }

    .btn-call-to-action span{
        display:table-cell;
        vertical-align:middle;
    }

Fiddle here: http://jsfiddle.net/MQHVE/3/

The important part here is to have the wrapper (the a tag) display:table and the content (span) display:table-cell. Then you can apply vertical-align:middle to the span.

Upvotes: 0

Julia Anne Jacobs
Julia Anne Jacobs

Reputation: 518

I'm not sure if this will help but cross browser centering in css is a big pain so I use Twitter Bootstrap and overwrite some of the classes.

If this sounds like something you'd consider you can check out the solution here

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105883

Leave :after in static . vertical-align to middle or explicite value (depends of where really stand arrow in svg/img). white-space:nowrap to parent box to secure, but not necessary: http://codepen.io/gcyrillus/pen/vzrGj

Upvotes: 0

Related Questions