What is the best way to align two spans vertically on either side of a div, in relation to the div itself?

Question

What is the best way to align two spans vertically on either side of a div, in relation to the div itself?

At the current moment, it appears as follows:

_______________________________________
|                                     |
|             ___________             |
|             |         |             |
|      ______ |   div   | ______      |
|      |span| |         | |span|      |
|      |____| |_________| |____|      |
|_____________________________________|

However, my desired outcome is this:

_______________________________________
|                                     |
|             ___________             |
|      ______ |         | ______      |
|      |span| |   div   | |span|      |
|      |____| |         | |____|      |
|             |_________|             |
|_____________________________________|

html css alignment

Answer 1

Answer №1

Flexbox has the power to achieve this https://jsfiddle.net/2Lzo9vfc/220/

CSS

.content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.content div, 
.content span {
    padding: 50px;
    border: 1px solid black;
}

.content div {
    height: 300px;
    line-height: 300px;
    padding: 0 50px;
}

HTML

<div class="content">
    <span>Span 1</span>
    <div>Div </div>
    <span>Span 2</span>
</div>

Answer 2

Flexbox has the power to achieve this https://jsfiddle.net/2Lzo9vfc/220/

CSS

.content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.content div, 
.content span {
    padding: 50px;
    border: 1px solid black;
}

.content div {
    height: 300px;
    line-height: 300px;
    padding: 0 50px;
}

HTML

<div class="content">
    <span>Span 1</span>
    <div>Div </div>
    <span>Span 2</span>
</div>

Answer 3

Answer №2

In order to provide a more tailored response, it would be helpful to review your code. However, you might want to consider implementing something along these lines:

<div style="display: table-cell; vertical-align: middle"> ... </div>

By placing the div and spans within a table structure, you could easily incorporate valign="middle" into the TD element.

Answer 4

In order to provide a more tailored response, it would be helpful to review your code. However, you might want to consider implementing something along these lines:

<div style="display: table-cell; vertical-align: middle"> ... </div>

By placing the div and spans within a table structure, you could easily incorporate valign="middle" into the TD element.

Answer 5

Answer №3

In my opinion, utilizing display:tablecell along with vertical-align:middle for your div would be a helpful approach. While I am not an expert in HTML, this method has worked well for me in similar situations.

Answer 6

In my opinion, utilizing display:tablecell along with vertical-align:middle for your div would be a helpful approach. While I am not an expert in HTML, this method has worked well for me in similar situations.

What is the best way to align two spans vertically on either side of a div, in relation to the div itself?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to position elements on a bootstrap card?

Using Javascript/jQuery to show measurements in the format of feet and inches

Combining cells through the utilization of JavaScript

I encountered a sudden issue with Beautifulsoup 4's .find_all() function, as

Content that is set to a fixed position within a hidden element will remain at the top

Unable to display information from a repeated `textarea` in ngRepeat

What is the best way to update a canvas chart when the side menu is hidden?

Why isn't the field I added to my state functioning properly?

Issue with Sticky Positioning in Bootstrap Column

Customize Material-Table: Adjusting Detail Panel Icon Rotation upon Row Expansion

What is preventing the audio from playing in Safari?

Is there a way I can ensure that two elements have identical heights?

Customizable user profile page

The iframe remains unresponsive and fails to resize as needed

Synchronize MySQL database structure with HTML5 local storage to enable querying

Creating an Angular 7 Template using HTML CSS and Javascript

Activate the jQuery click event by specifying the URL

I am trying to collapse the table header but I am having trouble doing so

Displaying inner arrays in an Angular2 MatTable

Position two div elements side by side