<a>引导栏中的垂直</a>居中<a>标签文本和图像</a>

Question

I have a Bootstrap row with some columns. In the columns I've added a span tag with text and an image between <'a'> and <'/a'>. I need the text to vertical align with the image, now it's always placed to the top of the column. I tried vertical-align: middle but no luck.

<div class="row">
<div class="container">
    <div class="col-md-2 col-md-offset-5">
        <a href="http://www.xxxx.xxx" target="_blank">
            <span style="float: left; vertical-align: middle;">Powered by</span>
            <img src="@Url.Content("~/Content/images/xxxxxxxx.gif")" alt="Powered by " class="img-responsive "/>
        </a>
    </div>
</div>

Anyone got a clue?

Answer 1

I recently tried to achieve the same thing, position a span vertically and horizontally inside an image of unknown height and width inside a thumbnail button link. This might be helpful for you or others who struggle.

jsfiddle demo

 .thumbnail:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .centered { display: inline-block; vertical-align: middle; position: relative; } .centered > span.fa-play-circle-o{ position: absolute; top: 50%; margin-top: -0.5em; margin-left: -0.5em; opacity: 0.5; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } a.thumbnail:hover .centered span.fa-play-circle-o{ opacity: 1; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <!-- inline color for visual debugging only --> <div class="row" style="background-color: aliceblue;"> <div class="col-xs-6" style="background-color:pink;"> <p class="text-center">text above</p> <a href="#" class="thumbnail btn btn-default"> <div class="centered"> <img class="img-responsive" src="http://placehold.it/600x200" /> <span class="fa fa-2x fa-play-circle-o"></span> </div> </a> <p class="text-center">larger text<br/>below</p> </div> </div> </div> 

Answer 2

Just use tag..

<a href="#" target="_blank">

            <img src="@Url.Content("~/Content/images/xxxxxxxx.gif")" alt="Powered by " class="img-responsive "/>
            <div style="float: left; vertical-align: middle;">Powered by</div>
        </a>

---

You can also use span tag as i tried but just put span tag under the img tag and a href text will be under the image..if you have any other question then please let me know..

hope it will work

Answer 3

You can do this in two ways.

Using Absolute position

Using display:table

USING ABSOLUTE POSITION

DESC: Give parent element {{position:relative}} and child(element to be centered) as

{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

USING TABLE BLOCK

DESC: Give parent element as display:table;width:100% and second parent as display:table-cell;vertical-align:middle;

Note* : {table-row} should have some height greater than its content.