<div>
<button style=" padding: 10px 16px 10px 16px;
vertical-align: middle;
margin: auto;
width: 32%;">
<img style=" width: 22px;
height: 22px;
vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
<span>Click to Stage</span>
</button>
<button style=" padding: 10px 16px 10px 16px;
vertical-align: middle;
margin: auto;
width: 32%;">
<img style=" width: 22px;
height: 22px;
vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
<span>Howzaat</span>
</button>
<button style=" padding: 10px 16px 10px 16px;
vertical-align: middle;
margin: auto;
width: 32%;">
<img style=" width: 22px;
height: 22px;
vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
<span>Hurrey with the mission</span>
</button>
</div>
<div>
<button style=" padding: 10px 16px 10px 16px;
vertical-align: middle;
margin: auto;
width: 32%;">
<img style=" width: 22px;
height: 22px;
vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
<span>Stage</span>
</button>
<button style=" padding: 10px 16px 10px 16px;
vertical-align: middle;
margin: auto;
width: 32%;">
<img style=" width: 22px;
height: 22px;
vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
<span>catch me if you can</span>
</button>
<button style=" padding: 10px 16px 10px 16px;
vertical-align: middle;
margin: auto;
width: 32%;">
<img style=" width: 22px;
height: 22px;
vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
<span>jungle mission</span>
</button>
</div>Above is the code am trying. here all images positions are moving here and there w.r.t text. But i need it to be fixed in one position in all buttons and make it identical. I need all images to be aligned in both rows and text as well.
Images position should be fixed and text starting position should be same in all buttons and should be middle of the button.
Some ref here.. here images are alligned and text should also be aligned
CodePudding user response：
in button style, add the following styles
display: flex;
align-items: center;
CodePudding user response：
You could use flex to set up your desired grid (pick whichever sizing suits you, I set mine to 700px in width. If you delete the btn-wrapper class, it'll lose that property and go to 100% width.
You can mess around with how you want the image and text to be placed in the button by using justify-content: center, justify-content: flex-start, justify-content: flex-end, justify-content: space-between, justify-content: space-evenly, justify-content: space-around.
View Snippet in full screen for best visualization!
Example as Snippet:
:root {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 1.5rem;
}
.flex {
display: flex;
}
.row {
flex-direction: row;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5);
}
.row > * {
flex-shrink: 0;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
.col-3 {
flex: 0 0 auto;
width: 25%;
max-width: 25%
}
.full-width {
flex: 0 0 100%;
max-width: 100%;
}
.wrap {
flex-wrap: wrap;
}
.btn {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-txt {
color: #fff;
}
.img {
width: 22px;
height: 22px;
vertical-align: middle;
content:url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png");
}
.btn-wrapper {
width: 700px;
}<div class="btn-wrapper flex row full-width wrap">
<div class="flex col-3">
<button class="btn">
<img class="img" alt="Text" />
<span class="btn-txt">Text for btn one</span>
</button>
</div>
<div class="btn-container flex col-3">
<button class="btn">
<img class="img" alt="Text" />
<span class="btn-txt">Text for btn two</span>
</button>
</div>
<div class="btn-container flex col-3">
<button class="btn">
<img class="img" alt="Text" />
<span class="btn-txt">Text for btn three</span>
</button>
</div>
<div class="btn-container flex col-3">
<button class="btn">
<img class="img" alt="Text" />
<span class="btn-txt">Text for btn four</span>
</button>
</div>
<div class="btn-container flex col-3">
<button class="btn">
<img class="img" alt="Text" />
<span class="btn-txt">Text for btn five</span>
</button>
</div>
<div class="btn-container flex col-3">
<button class="btn">
<img class="img" alt="Text" />
<span class="btn-txt">Text for btn six</span>
</button>
</div>
</div>