HTML/CSS align to left but keep center

Sławek Published at Dev

Sławek

I have code like this:

   <style>
      table {
        width: 20%;
        border: 1px solid black;
      }
    
      .player_line {
        display: flex;
        align-items: center;
      }
    
      .player_left,
      .player_right {
        flex: 1;
        border: 1px solid red;
      }
    
      .player_avatar {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-right: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
    </style>
    
    <table>
      <tr>
        <td>
          <div class="player_line">
            <div class="player_left"></div>
            <div class="player_avatar" style="background-image: url(./assets/static/images/user.png)"></div>
            A long user name
            <div class="player_right"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="player_line">
            <div class="player_left"></div>
            <div class="player_avatar" style="background-image: url(./assets/static/images/user.png)"></div>
            Not long name
            <div class="player_right"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="player_line">
            <div class="player_left"></div>
            <div class="player_avatar" style="background-image: url(./assets/static/images/user.png)"></div>
            A super long name
            <div class="player_right"></div>
          </div>
        </td>
      </tr>
    </table>

This will look like:

bad

What I can do, to align the avatars, so they are always aligned to left, but the whole player info (avatar + name) is still center in the td element? Like so:

I think that, the important thing here is that the player info can grow as it please (if there is space), so the avatar and name of the player always look correct (e.g. the name is always in one line, and the picture is not down scaled).

Itay Gal

Not sure if the red line is a requirement or not, but I would try a much simple solution like this one, set a container that can grow according to the content and center it inside the body. Here's an example:

body{
  width:100%;
  padding: 0; 
  margin: 0;
}

.container{
  display: flex;
  justify-content: center;
  width:100%;
}

.content{
  display: flex;
  flex-direction: column;
  padding: 10px;
  position: relative;
}

.player img{
  width: 20px;
}

<div class="container">
  <div class="content">
    <div class="player">
      <img src="https://png.pngitem.com/pimgs/s/508-5087236_tab-profile-f-user-icon-white-fill-hd.png"> 
      Name 1</div>
    <div class="player">
      <img src="https://png.pngitem.com/pimgs/s/508-5087236_tab-profile-f-user-icon-white-fill-hd.png"> 
      Name 2 Longer</div>
    <div class="player">
      <img src="https://png.pngitem.com/pimgs/s/508-5087236_tab-profile-f-user-icon-white-fill-hd.png">
      Name 3 A very long name</div>
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-19

Comments

0 comments

TOP Ranking

Article

HTML/CSS align to left but keep center

HTML/CSS align to left but keep center

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

pump.io port in URL

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Unable to use switch toggle for dark mode in material-ui

grouping by column variables and appending a new variable based on condition

BigQuery - concatenate ignoring NULL

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Python Read Directory And Output to CSV

Remove adjacent duplicates in linked list in C

Angular 8. Unknown amount of http.get requests in array to call, must be sequential, what to use

How to keep curl session alive between two php processes?

Limit number of characters in uitextview

JMeter: Why get error when try to save test plan

Always setting the text cursor on Textbox

MTKView Displaying Wide Gamut P3 Colorspace

Vector input in shiny R and then use it

How to implement an authentication method using Spring Boot and JPA?

Laravel getting value from another table using eloquent

org.springframework.web.client.HttpClientErrorException: 401 null

When I click any button in my view page the form is submitted