Horizontal Centering Text Over Image via CSS

Horizontal centering text over image via CSS

Try the following CSS:

.image {
    position:relative;
}

.text {
    left: 0;
    position:absolute;
    text-align:center;
    top: 30px;
    width: 100%
}

How to center text vertically and horizontally over an image

Just use position absolute and translate. Will be perfect centered (horizontally and vertically)

.img_container {  position: relative;}.img_container img {  width: 100%;  height: auto;}.img_container h2 {  color: white;  text-shadow: 1px 1px 1px black;  position: absolute;  top: 50%;  left:  50%;  -webkit-transform: translate(-50%, -50%); /* iOS */  transform: translate(-50%, -50%);}

<div class="img_container">  <img class="cover-image" src="http://lorempixel.com/400/200/sports/" alt="omg" />  <h2> bla bla bla </h2></div>

Center an image horizontally using CSS

use position absolute and margin like this

img.loading{
  position: absolute;
  left: 50%;
  margin-left: -(half ot the image width)px
}

Center text vertically and horizontally over image when resized

Your css for your hero text looks good – If I'm understanding your question correctly, I think the image should be modified to use 100 viewport width / height rather than 100%.

body {
  margin: 0;
}

.hero-image img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.hero-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

How can I align text and an image horizontally?

This is because div is a block element which will take whole width of screen , if you need it to be inline and adjust the screen use css float:left for both div which hold title and image

#header-titles{
  width:65%;
  margin-left:10%;
  text-align: left;
  float: left;
}
#header-image{
  width:20%;
  margin-right:5%;
  text-align:right;
  float: left;
}

here is your working example: http://jsfiddle.net/q9g2fj7d/34/

Overlay text over an image and align ALL center using only css and/or HTML

You are just missing to add text-align: center; to your #header

and, as a note, background-repeat: no-repeat; and background-position: center top; are useless properties in your css as it would just affect any image you add as background-image. It won't do anything with a html img

Second note: you can also get rid of margin-left: auto;, margin-right: auto; and z-index:100; in your .imgcenter for a cleaner css sheet (z-index won't ever work on any element unless you add a position NOT stactic in that element, position:static is the position of every single html element by default.)

CSS vertically and horizontally position text over an image

I would recommend the following method

.box {  text-align: center;  display: table;  width: 100vw;  height: 100vh;}.banner {  font-size: 32px;  display: table-cell;  vertical-align: middle;  height;  auto;  background-image: url('http://dummyimage.com/1000x400/b895b8/fff.jpg&text=+');  background-size: cover;}.banner_title {  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;  color: #fff;  display: inline-block;}.banner_title > div {  padding: 15px;}

<div class="box">  <div class="banner">    <div class="banner_content">      <div class="banner_title">        THIS MESSAGE IS A TEST MESSAGE      </div>      <div>        <button>          This is a test button        </button>      </div>    </div>  </div></div>

---

Related Topics