CODEWITHSUNDEEP
htmlcss
The Puma
The Puma

Reputation: 1390

How do you force text to line break and maintain centered positioning?

How do I get the "SHOP NOW" to be two different lines and centered?

Here is my relevant code:

.popover{
    position: absolute;
    display: none;
    color: white;
    z-index: 1500;
    text-align: center;
    background-color: black;
    font-family: impact;
    text-decoration: none;
    font-size: 50px;
    opacity: .8;
}
.pb1{
    bottom: 10px;
    width: 260px;
    height: 238px;
}

<div class="popover pb1" ><br/>SHOP NOW</div>

Upvotes: 0

Views: 110

Answers (2)

Tad
Tad

Reputation: 944

Add the following style

.pb2{
    margin-top: 50px;
}

Change the content to be like this

<div class="popover pb1" >
    <div class="pb2">SHOP<br /> NOW</div>
</div>​

Upvotes: 1

Boris
Boris

Reputation: 802

I would add a span tag. Check the solution here.

Upvotes: 1

Related Questions