javascript - Center align span inside anchor tag - Stack Overflow

admin管理员组

文章数量:1404330

    <div>
        <ul>
            <li class="dropdown">
             <a href="link" class="col-xs-12">
                <span class="dropdown-toggle" data-toggle="dropdown">
                    <span id="image" class="col-xs-3"><img src="/home" width="100" height="100" /></span>
                    <span id="display_name" class="col-xs-6">  @Name </span>
                    <span class="caret"></span>
                </span>
              </a>
            </li>
        </ul>
    </div>

I need center span element which contains name is always align at middle of anchor tag. I don't want to set height and line height of the a tag. Because the name length may vary. so a tag height also will differs. Whatever the name entered I need to align it to center. How to achieve this ?

    <div>
        <ul>
            <li class="dropdown">
             <a href="link" class="col-xs-12">
                <span class="dropdown-toggle" data-toggle="dropdown">
                    <span id="image" class="col-xs-3"><img src="/home" width="100" height="100" /></span>
                    <span id="display_name" class="col-xs-6">  @Name </span>
                    <span class="caret"></span>
                </span>
              </a>
            </li>
        </ul>
    </div>

I need center span element which contains name is always align at middle of anchor tag. I don't want to set height and line height of the a tag. Because the name length may vary. so a tag height also will differs. Whatever the name entered I need to align it to center. How to achieve this ?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 13, 2016 at 11:14 Shesha asked Jun 13, 2016 at 11:09 SheshaShesha 2,00777 gold badges2323 silver badges2929 bronze badges 8

• center vertically or horizontally?? and where is the anchor tag in you code?? – Gaurav Aggarwal Commented Jun 13, 2016 at 11:10
• Have you tried margin: auto? – William Brochmann Commented Jun 13, 2016 at 11:10
• Yes. margin: is not working – Shesha Commented Jun 13, 2016 at 11:11
• have you tried text-align:center ? – Ripun Commented Jun 13, 2016 at 11:12
• Can u paste your css or using code snapper? – MrDevel Commented Jun 13, 2016 at 11:13

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 5

Use this display:table and display:table-cell structure for vertically align it to center.

 a {
   display: table;
 }
 a span {
   display: table-cell;
   vertical-align: middle;
 }

<div>
  <ul>
    <li class="dropdown">
      <a href="link" class="col-xs-12">
        <span class="dropdown-toggle" data-toggle="dropdown">
                    <span id="image" class="col-xs-3"><img src="/home" width="100" height="100" /></span>
        <span id="display_name" class="col-xs-6">  @Name<br>@Name<br>@Name </span>
        <span class="caret"></span>
        </span>
      </a>
    </li>
  </ul>
</div>

In above snippet no matter how long is the name it will automatically align it to center

CSS-tricks has a guide on how to center things, vertically or horizontally.

.parent {
position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

This means that, implemented in your code, it will look like this:

<div>
    <ul>
        <li class="dropdown">
         <a href="link" class="col-xs-12">
            <span class="dropdown-toggle" data-toggle="dropdown">
                <span id="image" class="col-xs-3"><img src="/home" width="100" height="100" /></span>
                <span id="display_name" class="col-xs-6">  @Name </span>
                <span class="caret"></span>
            </span>
          </a>
        </li>
    </ul>
</div>

CSS:

.col-xs-12{
  position: relative;
}
.col-xs-6{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

This might need a little tweaking, since the positioning is absolute and you have two other elements, but it should work just fine.

本文标签： javascriptCenter align span inside anchor tagStack Overflow