下方顯示為黃色SVG圓圈的“標志”可以通過
但即使在.left_center_myicon中大部分重復.right_center_myicon，相同的調整<==== (2)也不會影響單選按鈕圖示。
如何在 DIV 中居中縮放單選按鈕圖示？我在這里使用行內 SVG 甚至將它們更改為鏈接（從<svg>到<img src="xyz.svg">本身就是一個脆弱而微妙的變化。如果您看到這個困難，請在您的答案中切換到鏈接的 SVG。
更新
我希望單選按鈕在其 div 中垂直居中，而該 div 本身在標題中垂直居中并右對齊。
理想情況下，我還希望能夠從樣式檔案中調整 SVG 單選按鈕圖示的比例（盡管我開始懷疑這樣做是否會違背既定的習慣——換句話說，我我想知道設計師是否最終會編輯 SVG 檔案而不是從 CSS 操縱 SVG 的比例）。
.header {
width: 100%;
height: 300px;
background-color: #ddd;
margin: 5px;
align-items:center;
display: block;
text-align: center;
}
.left_center_myicon {
margin: 0 auto;
background-color: #bbb;
float: left;
height: 70%; /* <==== (1) */
position: relative;
top: 50%;
left: 0;
transform: translate(0%, -50%);
}
.right_center_myicon {
background-color: #ccc;
margin: 0 auto;
float: right;
height: 70%; /* <==== (2) */
position: relative;
top: 50%;
left: 0;
transform: translate(0%, -50%);
vertical-align: middle;
}
svg { stroke:black; stroke-width:5; opacity:0.5; vertical-align: middle; }<div class="header">
<a href="index.html">
<img class="left_center_myicon" src="svg/logo.svg"/>
</a>
<div class="right_center_myicon">
<label class="myLabel">
<input type="radio" name="radioGroup" class="myradioG" checked>
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" style="fill:blue;" />
</svg>
</label>
<label class="inline-radio">
<input type="radio" name="radioGroup" class="myradioG">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect x="20" y="20" rx="15" ry="15" width="60" height="60" style="fill:red;" />
</svg>
</label>
</div>
</div>內容logo.svg為：
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="160" height="120"
viewBox="0 0 160 120"
version="1.1">
<g>
<circle cx="80" cy="60" r="50" fill="yellow" stroke="blue" stroke-width="10" />
</g>
</svg>
uj5u.com熱心網友回復：
如有疑問，請對所有內容進行 flexbox。并添加一些包裝紙......和一個墊片。
我發現使用 CSS 浮動很令人抓狂，所以我像躲避瘟疫一樣避免使用它。并回答您的另一個問題，只要有可能，我都會行內包含我的 svgs，這樣內部組件仍然可以使用 CSS 進行定位/設定樣式。不過，這種方法應該適用于任何一種。
我嘗試制作一個小提琴，但即使是最簡單的代碼也無法作業或顯示任何內容，所以我不確定是我還是他們......不過在我的瀏覽器中本地運行很好。https://imgur.com/AWrWK8Z
我添加了 2 個元素，一個中間的間隔元素設定為 flex 增長，因此它可以占用所有可用空間，將其他元素推向右側/左側。以及圍繞輸入/標簽對（以及唯一的左派）的包裝器。我在標題容器和左右子容器上都使用了 flex，以簡化垂直居中。
.header {
width: 100%;
height: 300px;
display: flex;
align-items: center;
background-color: #ddd;
}
.spacer {
flex: 1 0 auto;
background: rgba(200,200,200,1);
}
.left {
background-color: #bbb;
}
.right {
background-color: #ccc;
}
.wrapper {
display: flex;
height: 70%;
align-items: center;
outline: 1px solid blue;
}
.wrapper > div {
flex: 1 1 auto;
outline: 1px solid black;
}
<div class="header">
<div class="left wrapper">
<div>
<a>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="160" height="120"
viewBox="0 0 160 120"
version="1.1">
<g>
<circle cx="80" cy="60" r="50" fill="yellow" stroke="blue" stroke-width="10" />
</g>
</svg>
</a>
</div>
</div>
<div class="spacer"></div>
<div class="right wrapper">
<div>
<label class="myLabel">
<input type="radio" name="radioGroup" class="myradioG" checked>
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" style="fill:blue;" />
</svg>
</label>
</div>
<div>
<label class="inline-radio">
<input type="radio" name="radioGroup" class="myradioG">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect x="20" y="20" rx="15" ry="15" width="60" height="60" style="fill:red;" />
</svg>
</label>
</div>
</div>
</div>
uj5u.com熱心網友回復：
您是否嘗試display: block;為單選圖示添加到 CSS 中？我正在努力弄清楚您的無線電圖示屬于哪個類別？我的第一個猜測是myLabel和inline-radio你正在使用的標簽類。
嘗試
.myLabel {
display: block;
}
.inline-radio {
display: block;
}
你也可以嘗試在自己的包裝兩個標簽<div>，并試圖為這些新的相同方法<div>的
如果這不起作用，請嘗試參考此帖子，它也可能能夠回答您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355622.html
上一篇：未檢測到xpath跨度