Css 将父div水平对齐到中心_Css

Css 将父div水平对齐到中心

css

Css 将父div水平对齐到中心,css,Css,我有这个：图{ 显示：内联块； } 菲卡普顿{ 宽度：0；最小宽度：100%； } 这是一些随机文本，不应将figure标记扩展到img标记的宽度之外 < /代码> 使用显示：表< /代码>，与“代码>内联块有类似的行为，然后您可以考虑空白：Auto/ < /P> 图{ 显示：表格；保证金：自动； } 菲卡普顿{ 宽度：0；最小宽度：100%； } 这是一些随机文本，不应将figure标记扩展到img标记的宽度之外添加到图的CSS下方 margin-left: 50%;

我有这个：

图{
显示：内联块；
}
菲卡普顿{
宽度：0；
最小宽度：100%；
}


这是一些随机文本，不应将figure标记扩展到img标记的宽度之外
< /代码> 使用<代码>显示：表< /代码>，与“代码>内联块有类似的行为，然后您可以考虑<代码>空白：Auto/<代码> < /P>

图{
显示：表格；
保证金：自动；
}
菲卡普顿{
宽度：0；
最小宽度：100%；
}

这是一些随机文本，不应将figure标记扩展到img标记的宽度之外
添加到图的CSS
下方
  margin-left: 50%;
  transform: translateX(-50%);


图{
显示：内联块；
左边距：50%；
转化：translateX（-50%）；
}
菲卡普顿{
宽度：0；
最小宽度：100%；
}

这是一些随机文本，不应将figure标记扩展到img标记的宽度之外
对于图像或数字标签，您可以使用：
display: block;
margin:auto

position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%)

对于每个标签，如，您可以使用：
display: block;
margin:auto

position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%)

在这种情况下，您的代码必须是：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
            height: 400px;
            border: 1px solid grey
        }

        .hoz {
            position: absolute;
            left:50%;
            transform: translate(-50%);
        }
        .center {
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>

<div>
    <figure>
        <img src="https://i.imgur.com/k1Crowy.jpg" width="200" style="display: block;margin:auto">
        <figcaption> This is some random text that should not expand the figure tag beyond the width of the img tag </figcaption>
    </figure>
</div>

<div style="position: relative">
    <figure class="hoz" style="margin:0">
        <img src="https://i.imgur.com/k1Crowy.jpg" width="200">
        <figcaption> This is some random text that should not expand the figure tag beyond the width of the img tag </figcaption>
    </figure>
</div>

<div style="position: relative">
    <figure class="center" style="margin:0">
        <img src="https://i.imgur.com/k1Crowy.jpg" width="200">
        <figcaption> This is some random text that should not expand the figure tag beyond the width of the img tag </figcaption>
    </figure>
</div>

</body>
</html>


标题
div{
宽度：500px；
高度：400px；
边框：1px纯灰
}
霍斯先生{
位置：绝对位置；
左：50%；
转换：翻译（-50%）；
}
.中心{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
这是一些随机文本，不应将figure标记扩展到img标记的宽度之外
这是一些随机文本，不应将figure标记扩展到img标记的宽度之外
这是一些随机文本，不应将figure标记扩展到img标记的宽度之外
请注意，这可能会产生不必要的溢出，因为剩余的边距将添加到元素的宽度，在小屏幕中，这将超过容器的总宽度。（当图形的宽度也等于父宽度的50%时更为明显）下面是一个较大图像的示例：由于不必要的溢出，请查看底部的滚动条，因为图形的宽度+50%的边距大于总宽度