CODEWITHSUNDEEP
css
Mabeh Al-Zuq Yadeek
Mabeh Al-Zuq Yadeek

Reputation: 84

How do I center text between 2 icons + force icons to stay in middle of list?

Sorry for my horrible wording in the title.

Basically, I want to center text (especially longer text) between 2 icons in a list, but I want the icon to stay in the center of the list as the input becomes larger. This is my attempt at a JSFiddle: https://jsfiddle.net/39jL0aL7/

I have my CSS set up with the abc, left and right sides that make up the list.

In the JS fiddle, I have what I currently came up with. What I want it to look like is this:

enter image description here

Any help would be appreciated.

Upvotes: 0

Views: 51

Answers (2)

fabio.sang
fabio.sang

Reputation: 905

You can use flexbox to achieve this.

Set .list-group-item to

.list-group-item {
   display: flex;
   align-items: center;
}

This will vertically center the content of the item. And there's no need to have the icons in position: absolute anymore.

You can also place only one icon vertically on top by applying self-align: flex-start (or flex-end to place it at the bottom) to the icon.

Updated JSFiddle can be found here

Upvotes: 2

Mateusz Woźniak
Mateusz Woźniak

Reputation: 1499

You can try to do it by using transform property, like this:

.abc {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
}
   
.left,
.right {
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-6">
    <ul class="list-group">
        <li class="list-group-item">
            <span class="left"><em class="fa fa-reorder"></em></span>
            <div class="abc">
                Long sentences like these look horrific. Really horrific. I mean really bad. Look at the icons.
            </div>
            <span class="right"><em class="fa fa-reorder"></em></span>
        </li>
        <li class="list-group-item">
            <span class="left"><em class="fa fa-reorder"></em></span>
            <div class="abc">
                Long sentences like these look horrific. Really horrific. I mean really bad. Look at the icons. Long sentences like these look horrific. Really horrific. I mean really bad. Look at the icons.
            </div>
            <span class="right"><em class="fa fa-reorder"></em></span>
        </li>
        <li class="list-group-item"> <span class="left"><em class="fa fa-reorder"></em></span>
            <div class="abc">
                Short sentences like this look gr8 m8.
            </div>
            <span class="right"><em class="fa fa-reorder"></em></span>
        </li>
        <li class="list-group-item">Third item</li>
    </ul>
</div>

Upvotes: 0

Related Questions