Icon and Text Vertical alignment css-CodePudding

<div  >
    <section id="current-weather">
        <div  style="width: 60%;">
            <div >
                weather
            </div>
            <div >
                <h2>{{location}}</h2>
                <hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
                <h5 ><i  style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
                
            </div>
        </div>
    </section>
</div>

I have a problem with alignment text and icon. Look at screenshot I've already tried to use vertical-align: middle and baseline. Maybe somebody can resolve my problem.

CodePudding user response：

Here I have aligned it vertically and horizontally.

.container-fluid{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 60%;
}

<div  >
    <section id="current-weather">
        <div >
            <div >
                weather
            </div>
            <div >
                <h2>{{location}}</h2>
                <hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
                <h5 ><i  style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
            </div>
        </div>
    </section>
</div>

Thanks and best regards!

CodePudding user response：

I really appreciate your work, but I was asking to align icon and text in one line not the whole container on web page.

Check this image

Finally I coped with that. Here is my solution:

.align-inline {
    display: flex;
    align-items: center;
    justify-content: center;
}

<div  >
    <section id="current-weather">
        <div >
            <div >
                weather
            </div>
            <div >
                <h2>{{location}}</h2>
                <hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
                <h5 ><i  style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
            </div>
        </div>
    </section>
</div>

This is how result looks like