how to align centered text to the right in css?-CodePudding

I have a hero image and I want the text in it to be like this: image

but all I can do is put the text in center (while it's shifted to center): like this, or put in the right side (shifted to the right).

how do I combine? Hope I'm understood.

CodePudding user response：

.main{
  width: 100%;
  height: 100%;
  position: relative;
}
img{
  width: 100%;
  height: 100%;
}

.content{
  font-weight: 600;
  font-size: 4rem;
  text-transform: uppercase;
  position: absolute;
  z-index: 10;
  top: 20%;
  right: 0;
  color: crimson;
  text-align: center;
  
}

<div >
  <img src="https://picsum.photos/id/237/200/300">
  
  <div >
    Woof!
  </div>
</div>

Hope this help!

CodePudding user response：

The best way is to use flexbox and a background image to avoid using absolute:

.img-container {
  height: 500px;
  width: 800px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png);
  background-size: cover;
  color: #fff;
  text-align: center;
  padding: 50px;
}
.img-container h1 {
  font-size: 40px;
}
.img-container p {
  font-size: 20px;
}

<div >
  <div>
    <h1>Welcome to my site</h1>
    <p>A Subtitle</p>
  </div>
</div>