CODEWITHSUNDEEP
csshtmlwordpress
Pikk
Pikk

Reputation: 2743

Text-align not working for a piece of text

please take a look at this page.

As you can see there are some "read more" buttons. (translated - "czytaj więcej"). This are just after the excerpts. I want to center this read more button.

I gave the a href ... the following class:

class="readmorebtn"

And this CSS:

.readmorebtn{font-size:23px; text-align:center !important;}

But for some reasons it's not working. Any hints?

Upvotes: 0

Views: 40

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157334

You are using a element for your button, so a element is inline by default, so even if you center, the text has no place to get centered,as inline elements don't take 100% horizontal space, so inorder to center the text, you need to make it inline-block or block

.readmorebtn {
    display: block;
    font-size: 23px;
    text-align: center; /* No need of !important here */
}

If you are using inline-block the element will be inline and also block but again, you need to define some width to your inline-block element. Whereas block level element will take up entire horizontal space.

Demo (See what if you don't make it a block level element)

Demo 2 (Making it a block level element)

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

a element can't have the width because it's an inline element and without width you can't align to center so you should add display: inline-block; or display: block; to your a

.readmorebtn {
    display: block;
    font-size: 23px;
    text-align: center;
}

Upvotes: 1

Related Questions