我试图使用FlexBox在垂直和水平方向中心内联SVG元素.出于某种原因,当我在父容器上显示：flex时,内联SVG就会消失.
body {
background-color: #000;
margin: 0;
border: 0;
outline: 0;
}
.flexBox-container {
display: flex;
align-items: center;
justify-content: center;
}Box-container">
logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
如果你知道为什么会这样,我会很感激.
最佳答案
您的SVG没有设置内部宽度/高度.
您可以在SVG中执行此操作,< svg width =“200”height =“150”...< / svg>或使用CSS规则
.flexBox-container svg {
width: 100%;
}
堆栈代码段
body {
background-color: #000;
margin: 0;
border: 0;
outline: 0;
}
.flexBox-container {
display: flex;
align-items: center;
justify-content: center;
}
.flexBox-container svg {
width: 100%;
}
Box-container">
logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
如果您希望SVG水平和垂直居中,则Flex容器需要一个高度,即全视口,100vh
堆栈代码段
body {
background-color: #000;
margin: 0;
border: 0;
outline: 0;
}
.flexBox-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.flexBox-container svg {
width: 100%;
}
Box-container">
logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
看起来使用CSS宽度：100％和百分比在Firefox上的呈现方式与Chrome上的不同,但在SVG中使用内部宽度=“…”.
Src：SVG Spec: missing documentation: the “Viewport” (and
堆栈代码段
body {
background-color: #000;
margin: 0;
border: 0;
outline: 0;
}
.flexBox-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
Box-container">
logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
由于SVG的内部宽度是“像素”,您当然可以在CSS中使用px.
堆栈代码段
body {
background-color: #000;
margin: 0;
border: 0;
outline: 0;
}
.flexBox-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.flexBox-container svg {
width: 220px;
}
Box-container">
logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
猜你在找的HTML相关文章
