Where to add span tag that separates the content

user_14891980 0
Viewed 48

I want the text on the picture so I am using the following CSS code:

.blur{
            width:100%;
            height: 500px;
            background-image:url(./images/14.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
.b-cont{
            width: 100%;
            height: 500px;
            font-family: Raleway;            
            background: rgba(201, 186, 186, 0.1);
            backdrop-filter: blur(5px);
            color: #ffcd3c;
            font-size: 72px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
span{ 
            color: white;
        }

HTML code:

<body>
     <div class="blur">
            <div class="b-cont">
            Background of laptop is good but have to <span>blur</span> for the website
            </div>
        </div>
</body>

I wanted to color the sentence differently, so I added the span tag. It gave color but it separated the sentence

Look at this:
look this

flexbox css
3 Answers

The issue that is causing this is that you specified the div to display as flex layout. By removing display:flex; from the b-cont class, the text renders correctly:

.blur {
    width: 100%;
    height: 500px;
    background-image: url(./images/14.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: center;
    display: flex;
    align-items: center;
    text-align: center;
}

.b-cont {
    width: 100%;
    height: 500px;
    font-family: Raleway;
    background: rgba(201, 186, 186, 0.1);
    backdrop-filter: blur(5px);
    color: #ffcd3c;
    font-size: 72px;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: fit-content;
}

span {
    color: white;
}

<body>
    <div class="blur">
         <div class="b-cont">
             Background of laptop is good but have to <span>blur</span> for the website
         </div>
    </div>
</body>

Codepen: https://codepen.io/chingucoding/pen/GRjOGrK

user_60619650 
<body>
 <div class="blur">
        <div class="b-cont">
        <p>Background of laptop is good but have to <span>blur</span> for the website</p>
        </div>
    </div>

CSS

.b-cont{
        width: 100%;
        height: 500px;
        font-family: Raleway;            
        background: rgba(201, 186, 186, 0.1);
        backdrop-filter: blur(5px);
        color: #ffcd3c;
        font-size: 72px;
        display:flex;
        vertical-align: middle;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
span{ 
        color: white;
        display: inline-block;
        vertical-align: middle;

    }
user_132923810

My suggestion:

.blur {
  width: 100%;
  height: 500px;
  background-image: url(./images/14.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.b-cont {
  height: 100%;
  background: rgba(201, 186, 186, 0.1);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
}

.text {
  font-family: Raleway;
  color: #ffcd3c;
  font-size: 72px;
  text-align: center;
}

span {
  color: green; /* Changed to green in order to make it more visible */
}
<div class="blur">
  <div class="b-cont">
    <div class="text">Background of laptop is good but have to <span>blur</span> for the website</div>
  </div>
</div>

user_106680520
Related