CODEWITHSUNDEEP
htmlcss
nedrathefr
nedrathefr

Reputation: 243

Left align one element and center another element in div

I can't seem to get one element to be aligned to the left, and another to be aligned to the center within a div.

However, this aligns both elements to the center. How do I align the Facebook icon to the left, while centering the p element?

.panel-footer {
  text-align: center;
}

.panel-footer .fa-facebook {
  text-align: left;
}

.panel-footer p {
  display: inline-block;
  font-size: medium;
}
<div class="panel-footer">
  <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook"></a>
  <p>This website is made by ME!</p>
</div>

Upvotes: 8

Views: 19677

Answers (4)

Hiro
Hiro

Reputation: 359

For anyone who comes across this page, it looks like the way to go now is to use flexbox.

Basically

<div style="display: flex; justify-content: space-between;">
  <div>Left</div>
  <div>Center</div>
  <div style="width: 100px;"></div> <!-- placeholder; important to give it some width-->
</div>

Upvotes: 2

Adam Jenkins
Adam Jenkins

Reputation: 55613

Absolute position the facebook icon. Make sure you leave enough padding to the left of the p element to account for it (so that the p text doesn't overlap it). Make the padding is equal on both sides to make sure you p text doesn't overlap and it's still perfectly horizontally centered inside .panel-footer

.panel-footer {
  text-align: center;
  position: relative;
}

.panel-footer .fa-facebook {
   position: absolute;
   left:0;
   /* vertically center the icon */
   top: 50%; transform: translateY(-50%);
}

.panel-footer p {
  font-size: medium;
  padding: 0 20px; /* leave space for the icon adjust this value depending on how big your icon is */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="panel-footer">
  <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook"></a>
  <p>This website is made by ME!</p>
</div>

Upvotes: 9

Pete
Pete

Reputation: 58412

I would use flexbox for this:

.panel-footer {
  display:flex;
  flex-wrap:nowrap;
  align-items:center; /* vertical align */
}

.panel-footer p {
  flex-grow:1;       /* take up rest of line */
  text-align:center; /* centre text in p */
}
<div class="panel-footer">
  <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook">left</a>
  <p>This website is made by ME!</p>
</div>

Upvotes: 13

Sergey
Sergey

Reputation: 7682

.float-right {
  float: right;
}

.align-center {
  text-align: center;
  width: 100%;
}
<div class="panel-footer">
    <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook float-right">Link text</a>
    <p class="align-center">This website is made by ME!</p>
</div>

Upvotes: 1

Related Questions