启用垂直对齐和响应的 CSS

Posted

技术标签:

【中文标题】启用垂直对齐和响应的 CSS【英文标题】：CSS to enable vertical alignment and responsiveness 【发布时间】：2022-01-22 09:50:45 【问题描述】：

下面的代码默认是水平响应的。但是，它不是垂直响应的。是否有任何 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>

屏幕剪辑

我尝试了以下元素。

    vertical-align: middle align-content: center align-items: center align-self: center 调整大小：垂直； justify-content: center;

但他们没有工作。

【问题讨论】：

【参考方案1】：

我对你的 HTML 做了一些修改。我会将所有svg 嵌套在wrapper 中并弯曲该包装器。然后，您可以将每个 svg 单独嵌套在 div 中。对于这个例子，我称他们为row-contain 我也弯曲了那个div。

问题在于垂直响应是您在img 和svg 上具有固定宽度，因此如果您将它们以您想要的正确宽度和高度加载到您的站点中，然后保持相同的弹性布局，它们应该会自动调整大小垂直。例如，您可以使用示例媒体查询。为不同的高度调整元素的大小。您可以在我为大圆圈添加到您的 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>

【讨论】：

感谢@Kameron 的回答。但是，只有大圆圈是垂直响应的没有纵横比保留。较小的圆圈不像水平方向那样垂直响应。截屏链接：i.imgur.com/LnbRhEE.gif。如果这样可以简化事情，我可以将宽度用作auto。 @AyanMullick 查看调整后的内容。问题是圆圈具有固定高度，除非它们具有动态高度，否则它们不会垂直变化。 是的，现在大圆圈的纵横比在垂直调整期间也保持不变。但是，SVG 不会像响应水平调整那样响应垂直调整。是否需要在 SVG 中使用动态高度？想知道为什么它不会影响水平响应？ @AyanMullick 我删除了图像并将其替换为 div，因为您可以使用 max/min-height 和 width 来使其更具响应性。我觉得 div 更有意义，因为图像样式基本上是一样的。但是，具有这些样式的 div 响应速度更快。您最初是否将图像 src 作为 HTML 的一部分？我认为这只是为了样式。 是的，我有图片来源。就像在下面的链接中一样。 ayan.mullick.in :)【参考方案2】：

这样：

<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;

【讨论】：

不，@richard。在最新版本的 Edge 和 Chrome 上测试时，我得到了相同的垂直响应行为。

以上是关于启用垂直对齐和响应的 CSS的主要内容，如果未能解决你的问题，请参考以下文章

IE9 空白 css 和对齐

css基础文本对齐，水平对齐，垂直对齐

在 CSS 中垂直对齐和定位父 DIV

引导表中的垂直对齐

垂直对齐内容与浮动元素 + 响应式布局

使用CSS垂直和水平对齐（中间和中心）[重复]