如何对齐这些按钮？

Question

a.cr-button {
    border: solid blue;
}

.job-entry a {
    height: 65px;
    margin: 5px;
    display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
	<div class="btn-group-vertical col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 col-xs-12" style="display:table;">
            <div class="job-entry row large-text" style="display:table-row;">
                <div style="display:table-cell;width:75px;">
                    <a class="btn cr-button pad">
                        <img src="http://dummyimage.com/64x64/000/fff" width="50">
                    </a>
                </div>
                <div style="display:table-cell">
                    <a class="btn cr-button pad-lg" href="#">Test Job 1</a>
                </div>
                <div style="display:table-cell;width:75px;">
                    <a href="/Builder/DeleteJob" class="btn cr-button pad">
                        <img src="http://dummyimage.com/64x64/000/fff" width="50">
                    </a>
                </div>
            </div>
    </div>

那么我如何排列这三个锚？我已经在每个标签中尝试了vertical-align，这些标签对每个有意义的值都有意义。

JsFiddle version

Answer 1

您需要将div元素设置为vertical-align top，而不是其中包含的a元素：

<div style="vertical-align:top; display:table-cell">
    <a class="btn cr-button pad-lg" href="#">Test Job 1</a>
</div>

Answer 2

这样做

＆＃13;

＆＃13;

.cr-button {
    border: solid blue;
}

.job-entry a {
    height: 65px;
    margin: 5px;
    display: block;
}
.block{vertical-align: top;}

＆＃13;

	<div class="btn-group-vertical col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 col-xs-12" style="display:table;">
            <div class="job-entry row large-text" style="display:table-row;">
                <div class="block" style="display:table-cell;width:75px;">
                    <a class="btn cr-button pad">
                        <img src="http://dummyimage.com/64x64/000/fff" width="50">
                    </a>
                </div>
                <div class="block" style="display:table-cell">
                    <a class="btn cr-button pad-lg" href="#">Test Job 1</a>
                </div>
                <div class="block" style="display:table-cell;width:75px;">
                    <a href="/Builder/DeleteJob" class="btn cr-button pad">
                        <img src="http://dummyimage.com/64x64/000/fff" width="50">
                    </a>
                </div>
            </div>
    </div>

＆＃13;

＆＃13;

＆＃13;