CODEWITHSUNDEEP
htmlcss
George Pantazes
George Pantazes

Reputation: 1130

How to center Text in div with floating button without offsetting text?

How does one center text within a div and also have a button floating to the right without pushing the text over to the left?

We've already tried centering it but the best we could come up with was an approximate relative percentage. This doesn't scale well, but works at our typical screen resolution.

<div>
  <span style="position: absolute; left: 43%;">Text</span>
  <button style="float:right">Button</button>
</div>

The following image is the ideal way we'd like to to look, and we're hoping there is a way to achieve this without using a strange percentage like 43% since this doesn't work perfectly the larger the screen gets. Centered text with floating button to the right

Upvotes: 5

Views: 1506

Answers (3)

Facundo La Rocca
Facundo La Rocca

Reputation: 3866

Fixing elements is good way, but once you start fixing, you will never end. Instead I strongly recommend to you to learn a little bit about flex-box.

In your case, I'd divide the screen into 3 parts and then I could accomodate as I need all objects. It is more complicated when you are getting started, but once you are used to working with flex-box you will find it easy.

Take a look at this way:

.container {
  display: flex;
  flex-direction: row;
}

.left-div, 
.right-div {
  display: flex;
  width: 20%;
  border: 1px solid black;
}

.right-div{
  justify-content: flex-end;
}

.center-div {
  display: flex;
  width: 60%;
  border: 1px solid black;
  justify-content: center;
}

.button {
  margin-right: 10%;
}
<div class="container">
  <div class="left-div"></div>
  <div class="center-div">
    <span>Text</span>  
  </div>
  <div class="right-div">
    <button class="button">Button</button>
  </div>
</div>

Upvotes: 5

ppasler
ppasler

Reputation: 3719

If you can edit the html, you could try this one:

.wrapper {
  position: absolute; 
  left: 50%;
}

.left {
  position: relative; 
  left: -50%;
}

.right {
  float:right;
}
<div>
  <div class="wrapper">
    <div class="left">Text</div>
  </div>
    
  <button class="right">Button</button>
</div>

Upvotes: 3

Tim Barnett
Tim Barnett

Reputation: 1013

You could always position the button absolute, like this;

<div style="text-align:center; position:relative;">
  <span>Text</span>
  <button style="position:absolute; right:10px;">Button</button>
</div>

Upvotes: 4

Related Questions