Align items in middle in CSS

Question

I have a html code and i want to align theme like the image below: aligned image

My html code:

<button class="container">
    <span class="btn__img"></span>
    <span class="btn__txt">Basic</span>
</button>

`display:flex;flex-direction:column;` You can get more information from the [flex](https://www.w3schools.com/css/css3_flexbox.asp) layout. — Adarsh Mohan, Aug 08 '22 at 10:38
Or alternatively, you can change the span elements to be [block](https://www.w3schools.com/cssref/pr_class_display.asp) elements. — Adarsh Mohan, Aug 08 '22 at 10:41

Abhishek Mittal · Answer 1 · 2022-08-08T10:58:34.333

1

.container{
    display: flex;
    flex-direction: column;
    justify-content: center; // if you want to align it center vertically 
    align-items: center; // if you want to align it center horizontally
}

Apply this css to your button.

edited Aug 08 '22 at 10:58

answered Aug 08 '22 at 10:47

Abhishek Mittal

187
12

score 0 · Accepted Answer · answered Aug 08 '22 at 11:00

Method 1.

You can use a flex layout with column direction.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container span {
  border: 1px solid #000;
}

<button class="container">
    Button
    <span class="btn__img">First Span</span>
    <span class="btn__txt">Second Span</span>
</button>

Method 2.

You can use the display:block for the spans to achieve this.

.container span {
  display:block;
  border: 1px solid #000;
}

<button class="container">
    Button
    <span class="btn__img">First span</span>
    <span class="btn__txt">Second span</span>
</button>

Align items in middle in CSS

2 Answers2