如何設定圖示的百分比高度，并將其垂直居中，同時向左浮動？-有解無憂

以 HTML 為中心及其變種當然已經被如何設定圖示的百分比高度，并將其垂直居中，同時向左浮動？

或將其放大到某個百分比

如何設定圖示的百分比高度，并將其垂直居中，同時向左浮動？

但不是兩者兼而有之。

uj5u.com熱心網友回復：

.banner_box {
  width: 640px; height: 140px;
  max-height:140px;
  background-color: #ddd;
  margin: 5px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.left_center_myicon {
  display: block;
  margin: 0 auto;

  float: left;
}
.fab{
  font-size: 50px;
}

<!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">
  <title>Document</title>
  <link rel="stylesheet" href="github.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body>
  <div class="banner_box">
    <p class="left_center_myicon"><i class="fab fa-audible"></i></p>
</div>

<div class="banner_box">
  <p class="left_center_myicon"><i class="fab fa-audible"></i></p>
</div>
</body>
</html>

我不完全明白你的問題，但這是我最好的猜測。您正在嘗試使 SVG 更大或更小，您可以通過 CSS 中的 font-size 屬性來實作。嘗試在我上面添加的代碼中更改 .fab 的字體大小。我使用了 font-awesome 中的 SVG 我希望這是你問的。

uj5u.com熱心網友回復：

某些物件及其屬性在放置在某些元素標簽中時會以不同方式顯示，例如 img 標簽周圍的。

我對此有一個建議和解決方案，但請注意，這僅適用于您擁有的元素，還有其他方法可以實作您的需求，但這里有一個解決您的問題的方法。

（步驟：） 我建議在 '.banner_box' 中添加一個 'text-align:center' 以將可能添加的任何其他元素（例如文本）居中對齊，并增加額外的兼容性。

然后將 'display:flex' 屬性更改為 'display:block' 因為 'flex' 是高度百分比不起作用的原因，因為它使用固定的高度值來進行 flex，例如 100px 而不是 100% 并且也在大多數情況下還需要 flex-direction 等。

然后，在 '.left_center_myicon' 上對齊垂直中心的專案，同時保持浮動，您可以添加 'position:relative' 然后添加 'top:50%' & 'left:50%' 以設定頂部和左側位置值是“banner_box”寬度和高度的一半（50%）。然后添加'變換：翻譯（-50％，-50％）;' 沿banner_box 的x/y 軸設定元素的確切位置。在此之后，如果您愿意，您也可以洗掉“顯示：塊”，因為位置和軸已設定，除非您需要它來做其他事情。

兩個元素現在都應該位于絕對中心，同時保持浮點值并使用高度 % 值。

我也在 codepen 上創建了這個：https ://codepen.io/JJCrook/pen/PoKWjWW

HTML：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="30pt" height="15pt" viewBox="0 0 400 200" version="1.1">
    <g style="fill:rgb(10%,40%,70%);fill-opacity:1;">
        <rect x="100" y="50" rx="20" ry="20" width="200" height="100" />
    </g>
</svg>

<div class="banner_box">
    <img class="left_center_myicon" src="https://jcrooktesting.000webhostapp.com/mysvg.svg" />

</div>

<div class="banner_box">
    <a href="index.html"><img class="left_center_myicon" src="https://jcrooktesting.000webhostapp.com/mysvg.svg" /></a>

</div>

CSS：

.banner_box {
    width: 640px; 
    height: 150px;
    background-color: #ddd;
    margin: 5px;
    align-items:center;
    display: block;
    text-align:center;
}
.left_center_myicon {
    margin: 0 auto;
    
    float: left;
    height: 70%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

*修訂的CSS：（更改.left_center_myicon）

left: 0;
transform: translate(0%, -50%);

The codepen has been updated

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

標籤：html css svg 定心

上一篇：將字串陣列賦值給二維字串陣列

下一篇：在另一個函式中呼叫的D3函式總是回傳undefined