如何让锚点内文本两端对齐且宽度与上方图片一致？

核心问题分析 #

你的代码存在两个关键问题：

1. 多个元素重复使用同一个ID（不符合HTML规范，会导致样式失效或异常）
2. 文本块未限制宽度，且父级的text-align:center覆盖了两端对齐样式，同时<p>标签默认外边距导致文本宽度小于图片

修正步骤及代码实现 #

1. 替换重复ID为Class

将所有重复的id属性改为class，确保样式能正确作用于所有目标元素。

2. 让文本宽度匹配图片

• 给图片设置自适应宽度，确保其始终填满锚点容器
• 给文本块设置100%宽度，并移除默认外边距，使其完全匹配图片宽度

3. 确保两端对齐生效

• 给文本块单独设置text-align:justify，覆盖父级的居中样式
• 可选添加text-justify:inter-word优化英文单词间距

4. 优化布局稳定性

给锚点添加box-sizing:border-box，避免hover时的padding改变容器尺寸

修改后的完整代码 #

CSS 部分

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%;
    height: auto;
}
#Not-inn{
    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不改变容器总尺寸 */
    box-sizing: border-box;
}
.opnoticias:hover{
    padding: 20px;
}
.notitext{
    text-align: justify;
    text-justify: inter-word;
    width: 100%;
    /* 移除默认外边距，让文本宽度完全匹配容器 */
    margin: 10px 0 0;
    /* 可选：限制文本行数，避免溢出容器 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

HTML 部分

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

适配说明 #

• 更换图片时无需修改样式：图片会自动适配锚点的250px宽度，保持比例不变
• 如果需要调整卡片尺寸，只需修改.opnoticias的width和height值，图片和文本会自动适配新尺寸

内容的提问来源于stack exchange，提问作者Alvaro Ramirez