Codehiker Codehiker - 1 month ago 5
CSS Question

Aligning elements according to image

could someone help me with an example how to accomplish following layout? Is tables the best for this?

https://gyazo.com/80a2f66d280c480c1e6e70637959b271

I do not want to hardcode the width of the elements because I need it to be responsive aswell, thats why I am having a hard time..

So basicly I need it centered but not text-align centered. Appreciate all the help I could get.

Answer

Don't use tables, this makes it hard to optimize the website for mobile devices. Here's what I would do:

body {
  font-family: Arial, sans-serif;
  color: #444444;
}

.info {
  border: 1px solid #bbbbbb;
  border-width: 1px 0;
  padding: 10px;
}

.row {
  line-height: 30px;
  padding: 10px;
}

.label {
  display: inline-block;
  width: 30%; /* You may want to adjust this property */
  margin: 0 10px;
  text-align: right;
  font-size: 95%;
  color: #888888;
}

button {
  border: none;
  background-color: #43CEAD;
  border-radius: 3px;
  padding: 4px 10px;
  color: white;
  font-size: 90%;
}

.right {
  float: right;
}
<div class="info">
  <div class="row">
    <span class="label">Name:</span>
    John Doe
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">Password:</span>
    ********
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">Animus Heart ID:</span>
    B0 23459332
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">E-mail:</span>
    john@doe.com
    <button class="right">Edit</button>
  </div>
</div>