How to centre text vertically AND horizontally in a div whilst also flowing around an image who's size can vary

user_15445515 0
Viewed 23

Is it possible to centre text using CSS horizontally and vertically within a div that also has a variable size image (which should always be right-aligned)?

For example, this is to style the "header" of a sports league table display - with the header basically consisting of the league name (the text) and optionally a league logo (the image). The image width and height could be variable, depending on the logo image used.

.lbo_header_logo {
    border: 1px solid #31639C;
    float: right;
    margin-left: 20px;
    vertical-align: middle;
}

.lbo_header_title {
    padding: 5px;
    background-color: #ddeeff;
    border: 1px solid #31639C;
    min-width: 550px;
    vertical-align: middle;
    width: 50%;
}

.lbo_header_name {
    color: black;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}
<html>

<head>
    <title>Test!!</title>
</head>
    
<body>

<div class="lbo_header_title">
    <div class="lbo_header_name">League 1<IMG class="lbo_header_logo" src="images/logo1.gif" width="70" height="30"></div>
</div>

<div class="lbo_header_title">
    <div class="lbo_header_name">League 2<IMG class="lbo_header_logo" src="images/logo2.gif" width="30" height="70"></div>
</div>
                        
</body>

</html>

I think I've managed to get the text centred horizontally (as per the example), but have struggled vertically!

I've tried all manner of hacks, such as the line-height trick - but this doesn't work for me as the height of the image is unknown.

I guess I'd be looking for some sort of solution that uses a max value for the image height, as ultimately I'd want to limit the logo to a sensible height/width anyway (i.e. to avoid them uploading a stupidly long/wide image that screws up the display anyway!).

css html
1 Answers

You can avoid the need for hacky workarounds by using flexbox. It's capable of the sort of centering you're trying to do with some simple properties.

Set the container to flex and use align-items: center to vertically center your content. Then center align the text.

The text is wrapped in a div which is set to fill all the available space (flex: 1 1 auto) while the logo isn't allowed to grow or shrink (flex: none).

.lbo_header_title {
    align-items: center;
    display: flex;
    text-align: center;

    /** various existing styles */
    padding: 5px;
    background-color: #ddeeff;
    border: 1px solid #31639C;
    min-width: 550px;
    width: 50%;
}

.lbo_header_name {
    flex: 1 1 auto; 
}

.lbo_header_logo {
    flex: none;
    margin-left: 20px;
}
<div class="lbo_header_title">
    <div class="lbo_header_name">League 1</div>
    <img class="lbo_header_logo" src="https://placehold.it/70x30" width="70" height="30" />
</div>

<div class="lbo_header_title">
    <div class="lbo_header_name">League 2</div>
    <img class="lbo_header_logo" src="https://placehold.it/30x70" width="30" height="70" />
</div>

user_13109290
Related