How to justify text inside an anchor-CodePudding

How do I make the text to be justified but at the same lenght as the image above it? I tried putting it inside a div, but it's not working, The text looks like this

Any tip to fix this?

On the code posted, I used a simple web image so it can be seen an image which helps to understand the problem. I hope that if someone can make a solution that works with that image, also works if I change the images, or if I need to keep the same size, please tell me to avoid making mistakes

body{
    text-align: center;
    background-color: #9e0819;
    font-family: 'Roboto', sans-serif;
    color: white;
    margin: 0;
}




#notifoto{
    border-radius: 5px;
    margin-top: 10px;
}
#Not-inn{
    /* float: left; */
    display: flex;
    width: 100%;
    align-content: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
#opnoticias{
    text-decoration: none;
    color: white;
    margin: 25px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(255, 255, 255,1.12);
    display: inline-block;
    height: 250px;
    width: 250px;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition-duration: 0.25s;
    transition-timing-function: ease;
}
#opnoticias:hover{
    padding: 20px;
    
}
#notitext{
    text-align: justify;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="CAFestilos.css">
    <title>HuancayoCAF</title>
</head>
<body>
   

    <div id="Noticias">
        <h2>Noticias</h2>
        <div id="Not-inn">
        <a id="opnoticias" href="https://www.youtube.com/watch?v=faLNS2fXxWA" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping" height="150px"><p id="notitext">Kurt Fritz y Vincenzo Garavito dan positivo a 15 drogas diferentes previo al partido</p></a>
        <a id="opnoticias" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping" height="150px"><p id="notitext">Embargan la casa de Alex Valera por evasión de impuestos</p></a>
        <a id="opnoticias" href="https://youtu.be/45O04_E8aVg?t=6" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping" height="150px"><p id="notitext">Deportan a Gago de Australia luego de no encontrar el paradero del bus</p></a>
        <a id="opnoticias" href="https://youtu.be/nKFZJU7bvaw" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping" height="150px"><p id="notitext">Marcus Thuram renueva en el Huancayo CAF por S/5000 y un KFC</p></a>
        </div>   
    </div>

</body>
</html>

CodePudding user response：

Making #notifoto 100% width and #opnoticias replacing the margin for padding should do the trick. This is because the problem is caused by the image not adjusting to the content, so you can make a fixed container or just make the image full width.

#notifoto{ width: 100% } 
#opnoticias { padding: 25px }

Consider replacing your ids for classes, as they suppose to be unique. e.g.

#notifoto => .notifoto id="notifoto" =>

Your code with just those two modifications (keeping the ids for not affecting your result):

body{
    text-align: center;
    background-color: #9e0819;
    font-family: 'Roboto', sans-serif;
    color: white;
    margin: 0;
}




#notifoto{
    border-radius: 5px;
    margin-top: 10px;
    width: 100%;
}
#Not-inn{
    /* float: left; */
    display: flex;
    width: 100%;
    align-content: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
#opnoticias{
    text-decoration: none;
    color: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(255, 255, 255,1.12);
    display: inline-block;
    height: 250px;
    width: 250px;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition-duration: 0.25s;
    transition-timing-function: ease;
}
#opnoticias:hover{
    padding: 20px;
    
}
#notitext{
    text-align: justify;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="CAFestilos.css">
    <title>HuancayoCAF</title>
</head>
<body>
   

    <div id="Noticias">
        <h2>Noticias</h2>
        <div id="Not-inn">
        <a id="opnoticias" href="#" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping" height="150px"><p id="notitext">Kurt Fritz y Vincenzo Garavito dan positivo a 15 drogas diferentes previo al partido</p></a>
        <a id="opnoticias" href="#" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping" height="150px"><p id="notitext">Embargan la casa de Alex Valera por evasión de impuestos</p></a>
        <a id="opnoticias" href="#" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping" height="150px"><p id="notitext">Deportan a Gago de Australia luego de no encontrar el paradero del bus</p></a>
        <a id="opnoticias" href="#" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping" height="150px"><p id="notitext">Marcus Thuram renueva en el Huancayo CAF por S/5000 y un KFC</p></a>
        </div>   
    </div>

</body>
</html>

CodePudding user response：

try that.

Remove the height property from your img tags with #notifoto id as such:

     <img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping" height="150px">

Into that:

    <img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping">

After that add width: 100% into your notifoto css selector and remove margin-top. It will look like that:

#notifoto{
border-radius: 5px;
width: 100%; 
}

Finally, add padding into your #opnoticias selector: ( last line ) I gave it 10px, but it is up to you.

#opnoticias{
text-decoration: none;
color: white;
margin: 25px;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(255, 255, 255,1.12);
display: inline-block;
height: 250px;
width: 250px;
text-align: center;
align-items: center;
align-content: center;
justify-content: center;
transition-duration: 0.25s;
transition-timing-function: ease;
padding: 10px
}

That should fix your problem. Let me know if not.

Here's the full code

body{
    text-align: center;
    background-color: #9e0819;
    font-family: 'Roboto', sans-serif;
    color: white;
    margin: 0;
}
header{
    border-bottom: 1px solid white;
    padding: 20px;
}
#primero{
    display: flex;
    text-align: center;
    align-items: center;
    align-content: center;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    float: left;
}
h1{
    margin-left: 5px;
    margin-right: 5px;
}
#opciones{
    display: flex;
    border-bottom: 1px solid white;
    height: 150px;

}
#ophome{
    text-decoration: none;
    color: white;
    margin: 25px auto;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
    display: flex;
    height: 75px;
    width: 150px;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition-duration: 0.25s;
}
#ophome:hover{
    padding: 20px;

}

#spotify{
    border-bottom: 1px solid white;
}
iframe{
    margin-bottom: 30px;
}
#notifoto{
    border-radius: 5px;
    width: 100%;
}
#Not-inn{
    /* float: left; */
    display: flex;
    width: 100%;
    align-content: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
#opnoticias{
    text-decoration: none;
    color: white;
    margin: 25px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(255, 255, 255,1.12);
    display: inline-block;
    height: 250px;
    width: 250px;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    padding: 10px
}
#opnoticias:hover{
    padding: 20px;
    
}
#notitext{
    text-align: justify;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>HuancayoCAF</title>
</head>
<body>
    <header>
        ¡¡¡La página oficial del mejor equipo peruano!!!
    </header>

    <div id="primero">
        <img src="icons/huancayoCAF.png" alt="LogoHuancayoCAF" height="150px">
        <h1>HUANCAYO CAF</h1>
            
    </div>


    <div id="opciones">
        <a id="ophome" href="plantilla.html">Nuestros jugadores</a>
        <a id="ophome" href="et.html ">Nuestro equipo técnico</a>
        <a id="ophome" href="valores.html">Nuestros valores</a>
        <a id="ophome" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Miranos entrenar aquí</a>
        <a id="ophome" href="">Contenido HOT del equipo, aquí</a>
    </div>

    <div id="spotify">
        <h2>Escucha tu playlist de mrd mientras miras este sinsentido</h2>
        <p>(Advertencia, no se puede bajar volumen, cuidado con tus oidos)</p>
        <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2yAjjqcHMy6qUI6NNzNoVD?utm_source=generator" width="50%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
    </div>

    <div id="Noticias">
        <h2>Noticias</h2>
        <div id="Not-inn">
        <a id="opnoticias" href="https://www.youtube.com/watch?v=faLNS2fXxWA" target="blank">
            <img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping">
            <p id="notitext">Kurt Fritz y Vincenzo Garavito dan positivo a 15 drogas diferentes previo al partido</p></a>
        <a id="opnoticias" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping"><p id="notitext">Embargan la casa de Alex Valera por evasión de impuestos</p></a>
        <a id="opnoticias" href="https://youtu.be/45O04_E8aVg?t=6" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping"><p id="notitext">Deportan a Gago de Australia luego de no encontrar el paradero del bus</p></a>
        <a id="opnoticias" href="https://youtu.be/nKFZJU7bvaw" target="blank"><img id="notifoto" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg" alt="imagendoping"><p id="notitext">Marcus Thuram renueva en el Huancayo CAF por S/5000 y un KFC</p></a>
        </div>   
    </div>

</body>
</html>

What we are achieving with that is an image that fits the container together with your p element. both will have the same width. finally, we add some padding to the container so that it will not be touching the border.