Top alignment with a centralized element

Asked

Viewed 94 times

1

I have a div and I need to put a text to the left, another to the right, and a icon centered, all aligned on top. I managed to reach this point, but so far I can’t align them on top:

<div style="width=40%">
     <a>
       <h:outputLabel value="Alta Prioridade" style="float: left;"/>
          <i style="margin-left: 50%; margin-right: 50%;" class="fa fa-thumb-tack" ></i>
       <h:outputLabel value="08/10/2015" style="float: right; text-align: right;"/>
     </a>
</div>
css

1 answer

2

The following code works in any browser. If you want to increase the size of the center column, decrease the size of . col proportionally, the sum of the columns should never exceed 100%

i {
  display: block;
  width: 32px;
  height: 32px;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
}
.container {
  width: 40%;
  border: 1px solid gray;
  height: 100px;
}
.col {
  float: left;
  width: 29.999%;
  overflow: hidden;
}
.col.center {
  width: 40%
}
<div class="container">
  <div class="col left">Alta Prioridade</div>
  <div class="col center"><i></i></div>
  <div class="col right">08/10/2015</div>
</div>

  • CSS for class . left and . right does not need?

  • Only if VC wants different values for left and/or right column

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.