The text inside the image doesn't go center-CodePudding

The text inside the image in my website doesn't go center even though I already put text-align and align-items. kindly help me, this is for my assignment. I used html and css for this.

.projname img{
   width: 100%;
   height: 40vh;
}
.proj-title {
   position: absolute;
   top: 20%;
   text-align: center;
   color: white;
}
.proj-title h1 {
   font-size: 500%;
   text-transform: uppercase;
   text-shadow: 1px 1px 10px #000;
   color: white;
   text-align: center;
}
.proj-title h3 {
   font-size: 200%;
   font-weight: 500;
   text-shadow: 1px 1px 10px #000;
   padding-bottom: 1rem;
   color: white;
   text-align: center;
}

  <div id="home">
                    <div >
                            <img src="background.jpg">
                            <div >
                                <hr >Boostrap</h1>
                                <h3>Lorem ipsum, lorem ipsum dolor sit amet</h3>
                           </div>
                        </div>
                    </div>

CodePudding user response：

How about adding and using the picture as a background image instead? See the snippet below for your reference:

.projname img {
  width: 100%;
  height: 40vh;
}

.proj-title {
  position: absolute;
  top: 20%;
  text-align: center;
  color: white;
  background: url("https://external-content.duckduckgo.com/iu/?u=https://www.camera-rumors.com/wp-content/uploads/2018/02/sony-a7iii-sample-image-3.jpg&f=1&nofb=1");
  background-size: 100% auto;
  padding: 1rem;
}

.proj-title h1 {
  font-size: 500%;
  text-transform: uppercase;
  text-shadow: 1px 1px 10px #000;
  color: white;
  text-align: center;
}

.proj-title h3 {
  font-size: 200%;
  font-weight: 500;
  text-shadow: 1px 1px 10px #000;
  padding-bottom: 1rem;
  color: white;
  text-align: center;
}

<div id="home">
  <div >
    <div >
      <h1 >Boostrap</h1>
      <h3>Lorem ipsum, lorem ipsum dolor sit amet</h3>
    </div>
  </div>
</div>

If you really wanna go you route then you can only continue by using position to center the texts, like so:

.projname img {
  width: 100%;
  height: 60vh;
}

.proj-title {
  position: absolute;
  inset: 0 0 15% 0;
  text-align: center;
  color: white;
}

.proj-title h1 {
  font-size: 500%;
  text-transform: uppercase;
  text-shadow: 1px 1px 10px #000;
  color: white;
  text-align: center;
}

.proj-title h3 {
  font-size: 200%;
  font-weight: 500;
  text-shadow: 1px 1px 10px #000;
  padding-bottom: 1rem;
  color: white;
  text-align: center;
}

<div id="home">
  <div >
    <img src="https://external-content.duckduckgo.com/iu/?u=https://www.camera-rumors.com/wp-content/uploads/2018/02/sony-a7iii-sample-image-3.jpg&f=1&nofb=1">
    <div >
      <h1 >Boostrap</h1>
      <h3>Lorem ipsum, lorem ipsum dolor sit amet</h3>
    </div>
  </div>
</div>

CodePudding user response：

you can add image as background-image for <div > .
and remove position : absolute from .proj-title

.projname{
    background-image: url(https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg);
}
.proj-title {
   text-align: center;
   color: white;
}
.proj-title h1 {
   font-size: 500%;
   text-transform: uppercase;
   text-shadow: 1px 1px 10px #000;
   color: white;
   text-align: center;
}
.proj-title h3 {
   font-size: 200%;
   font-weight: 500;
   text-shadow: 1px 1px 10px #000;
   padding-bottom: 1rem;
   color: white;
   text-align: center;
}

<div id="home">
                    <div >
                            <img src="background.jpg">
                            <div >
                                <h1 >Boostrap</h1>
                                <h3>Lorem ipsum, lorem ipsum dolor sit amet</h3>
                           </div>
                        </div>
                    </div>