CSS實作垂直對齊和回應-有解無憂

下面的代碼默認是水平回應的。但是，它不是垂直回應的。是否可以使用任何 CSS 元素來啟用垂直回應？

顯示代碼片段

<html>
<style>
    body {background-color: black; color: white; text-align: center;}
    svg  {width: 100px; height: 100px;}
    img  {width: 300px; height: 300px; border: 1px solid currentColor; border-radius:50%}
</style>

    <body>
        <img class="centered-and-cropped">
        <br><br>

        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <br><br>

        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <br><br>

        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <br><br>

        <svg><use href="#Circle"></use></svg>
    </body>

<svg style="display: none;"><symbol id="Circle"><circle cx="50" cy="50" r="40" stroke="currentColor"/></symbol></svg>

</html>

螢屏剪輯 CSS 實作垂直對齊和回應

我嘗試了以下元素。

垂直對齊：中間
對齊內容：居中
對齊專案：居中
對齊自我：居中
調整大小：垂直；對齊內容：居中；

但他們沒有作業。

uj5u.com熱心網友回復：

我有點重新處理你的 HTML。我會將 all 嵌套svg在 a 中wrapper并彎曲該包裝器。然后您可以將每個svg單獨嵌套在 div 中。對于這個例子，我稱他們為row-contain我也彎曲了那個 div。

垂直回應的問題是你的寬度是固定的img，svg所以如果你將它們加載到你的站點中，并具有你想要的正確寬度和高度，然后保持相同的 flex 布局，它們應該會自動垂直調整大小。例如，您可以使用示例媒體查詢。為不同的高度調整元素的大小。您可以在我為大圓圈添加到 CSS 中查看我的示例。請參閱下面的更改。

body {
  height: 100vh;
  background-color: black;
  color: white;
  text-align: center;
}

/* Parent to row-contain, nesting all SVG's */
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.row-contain {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

/* SVG fixed-height → standard device height */
 svg {
    width: 100px;
    height: 100px;
}
 img.centered-and-cropped {
    width: 300px;
    height: 300px;
    border: 1px solid currentColor;
    border-radius: 50%;

}


/* Media queries for circles */
@media only screen and (max-height: 750px) {
  img.centered-and-cropped { /* big circle resize */
    height: 150px;
    width: 150px;
  }
  
  svg { /* Fill's in for SVG for media */
    outline: solid 1px white;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-left: 10px;
  }
  
  use { /* display: none; on `use` to get rid of main SVG → vertical responsiveness kicks in */
    display: none;
  }
}

/* try removing the last media query and see that when the initial SVG resizes 
it gets clipped. TBH, I don't work with SVG's much but I'm sure there is a way 
around it, but for now this solution shoulld work just fine */

<html>


    <body>
       <img src="https://dummyimage.com/600x400/000/fff" class="centered-and-cropped">
    <div class="wrapper">
        <br><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg> 
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> 
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> 
      </div><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> 
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
      </div><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
      </div><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg>
      </div>      
    </div>

    </body>

<svg style="display: none; height: auto; width: auto;"><symbol id="Circle"><circle cx="50" cy="50" r="40" stroke="currentColor"/></symbol></svg>

</html>

uj5u.com熱心網友回復：

這樣說：

<body>
  <div class="outer">
  <div class="svg">
    <img class="centered-and-cropped">
    <br><br>

    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <svg><use href="#Circle"></use></svg>
    <br><br>

    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <br><br>

    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <br><br>
    <svg><use href="#Circle"></use></svg>
  </div>
</div>
</body>

和CSS

.outer{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/390838.html

標籤：css svg 响应式设计垂直对齐反应能力

上一篇：如何在<style>標簽內使用CSS為SVG設定影片

下一篇：CSS規則不適用于SVG元素