CODEWITHSUNDEEP
htmlcss
Jordan
Jordan

Reputation: 9901

How do I align these buttons?

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>

So how do I line these three anchors? I've tried vertical-align in every tag that makes sense with every value that makes sense.

JsFiddle version

Upvotes: 0

Views: 48

Answers (2)

Ram kumar
Ram kumar

Reputation: 3162

Do like this

.cr-button {
    border: solid blue;
}

.job-entry a {
    height: 65px;
    margin: 5px;
    display: block;
}
.block{vertical-align: top;}
	<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>

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

You need to give your div elements a vertical-align set to top, not the a elements contained within them:

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

Upvotes: 1

Related Questions