CODEWITHSUNDEEP
cssvertical-alignment
rs19
rs19

Reputation: 667

center text vertically and horizontally over div/img

I'm trying to get "concierge" to always be centered over the image on this page. I think I'm close but it's not just right. Any ideas? 

header.concierge_header {
  position: absolute !important;
  top: 30% !important;
  color: white !important;
  left: 50%;
}

and then concierge_header_div is the parent

other option would be to switch over to something like this but i haven't gotten it to work

display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;

Upvotes: 0

Views: 152

Answers (3)

vahid kargar
vahid kargar

Reputation: 794

for setting sth verticaly and horizontaly center of a dom, you have to set position of wrapper to relative, and set position of target dom to absolute and set top,right,left,bottom positions to 0 and margin to auto

.concierge_header h1
{
  position: absolute !important;
  color: white !important;
  top:0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  display: block;
  height: 50px;
  text-align: center;
}
.concierge_header_div {
  position: Relative;
  width: auto;
  height: auto;
}

Upvotes: 0

Dinei
Dinei

Reputation: 5464

You can use this way:

header.concierge_header {
  position: absolute !important;
  top: 50% !important;
  margin-top: -67px;
  color: white !important;
  left: 50%;
}

Or, another approach is:

header.concierge_header {
  position: absolute !important;
  text-align: center;
  color: white !important;
  width: 100%;
}
header.concierge_header h1 {
  line-height:527px; /* this is the size of the image */
}

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 4503

instead

header.concierge_header {
      position: absolute !important;
      top: 30% !important;
      color: white !important;
      left: 50%;
    }

to

header.concierge_header {
  position: absolute !important;
  top: 50% !important;
 left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
  color: white !important;

}

Upvotes: 1

Related Questions