horizontal alignment with css

Question

horizontal alignment with css

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

How do I leave the 'title' aligned with the icon without the need to put the 'title' inside some div.

.card-blue,
.card-red,
.card-green,
.card-grey,
.card-yellow {
  position: relative;
  width: 300px;
  border-radius: 4px;
  background: #FFFFFF;
  margin: 10px auto;
  overflow: hidden;
  padding: 0 0 50px 0;
}

.card-grey {
  border: 1px solid #484848 !important;
}

.card-blue {
  border: 1px solid #0091FF !important;
}

.card-red {
  border: 1px solid #f65314 !important;
}

.card-green {
  border: 1px solid #34a853 !important;
}

.card-yellow {
  border: 1px solid #fbbc05 !important;
}

.card-red-head,
.card-blue-head,
.card-green-head,
.card-grey-head,
.card-yellow-head {
  padding: 10px;
  color: #FFFFFF;
}

.card-grey-head {
  background: #484848;
}

.card-blue-head {
  background: #0091FF;
}

.card-red-head {
  background: #f65314;
}

.card-green-head {
  background: #34a853;
}

.card-yellow-head {
  background: #fbbc05;
}


/* Mobile */

@media only screen and (max-width: 550px) {
  .card-blue,
  .card-red,
  .card-green,
  .card-grey,
  .card-yellow {
    width: 95%;
  }
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="card-red">
  <div class="card-red-head">
    <i class="material-icons">delete</i> TÍTULO
  </div>
  <div class="container-body">
    texto
  </div>
</div>

css

asked by anonymous 20.12.2016 / 21:06

2 answers

2

Complementing our LocalHost friend's response, I would do so:

.box{
  display: block;
  border: 1px solid #e67e22;
  font-family: sans-serif;
}

.box-header{
  background-color: #e67e22;
  padding: 0 15px;
}

.box-header i, .box-header p{
  color: #fff;
  display: inline-block;
  vertical-align: middle;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="box">
  <div class="box-header">
    <i class="material-icons">delete</i> 
    <p>Título</p>
  </div>
  <div class="box-content">
    <p>texto</p>
  </div>
</div>

The secret of leaving child elements of box-header with display: inline-block after children working online is to only align vertically with vertical-align: middle With this technique we do not need to work with float that was originally created to align images in texts, and also avoid having to use those clear: both

21.12.2016 / 12:34

How do I put notifications in an Android application? Is it possible to manipulate a template from an abstract route, in other routes, dynamically?

score 2 · Accepted Answer

Would that be it? I put the tag <a> and the icon and title inside it. And in css, I added the following line .card-red-head i{ margin-top:-4px;float:left; } . Which in the case formats the positioning of the icon in relation to the text. I hope to have helped, any questions comment there!

.card-blue,
.card-red,
.card-green,
.card-grey,
.card-yellow {
  position: relative;
  width: 300px;
  border-radius: 4px;
  background: #FFFFFF;
  margin: 10px auto;
  overflow: hidden;
  padding: 0 0 50px 0;
}

.card-grey {
  border: 1px solid #484848 !important;
}

.card-blue {
  border: 1px solid #0091FF !important;
}

.card-red {
  border: 1px solid #f65314 !important;
}

.card-green {
  border: 1px solid #34a853 !important;
}

.card-yellow {
  border: 1px solid #fbbc05 !important;
}

.card-red-head,
.card-blue-head,
.card-green-head,
.card-grey-head,
.card-yellow-head {
  padding: 10px;
  color: #FFFFFF;
}

.card-grey-head {
  background: #484848;
}

.card-blue-head {
  background: #0091FF;
}

.card-red-head {

  background: #f65314;
}
 .card-red-head i{ margin-top:-4px;float:left; }
.card-green-head {
  background: #34a853;
}

.card-yellow-head {
  background: #fbbc05;
}


/* Mobile */

@media only screen and (max-width: 550px) {
  .card-blue,
  .card-red,
  .card-green,
  .card-grey,
  .card-yellow {
    width: 95%;
  }
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="card-red">
  <div class="card-red-head">
    <a><i class="material-icons">delete</i>TÍTULO</a>
  </div>
  <div class="container-body">
    texto
  </div>
</div>