How do I set the percent height of an icon, and vertically center it, while left-floating it?-CodePudding

Centering in HTML with its varieties has of course been asked and answered

or enlarge it to some percentage

but not both.

CodePudding user response：

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

I don't get your question totally but here is my best guess. You are trying to make the SVG bigger or smaller and you can do it by font-size attribute in CSS. Try changing the font size of .fab in the code I added above. I used an SVG from font-awesome I hope this is what you asked.

CodePudding user response：

Some objects and their properties are displayed differently when they are placed within certain element tags, such as the you have around the img tag.

I have a suggestion and fix for this but note it's simply for the elements you have, there are also other ways of achieving what you need but here's a fix for your question.

(Steps:) I'd suggest adding a 'text-align:center' to the '.banner_box' to center align any other elements that may be added such as text and also to add extra compatibility.

Then change the 'display:flex' property to 'display:block' as 'flex' is the reason the height percentages don't work as it uses fixed height values in-order to flex, e.g 100px instead of 100% and also in most cases flex-direction etc would also be needed.

Then, on the '.left_center_myicon' to align the items in the vertical center whilst keeping the float, you could add 'position:relative' then add 'top:50%' & 'left:50%' to set the top and left position values to be half (50%) of the 'banner_box's width and height. Then add ' transform: translate(-50%, -50%);' to set the exact position of the element along the x/y axis of the banner_box. After this you can also remove the 'display:block' if you prefer as the position and axis is set unless you required it for something else.

Both elements should now be in the absolute center, whilst keeping the float value and also using the height % values.

I've also created this on 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%);
}

*Revised CSS: (Changed .left_center_myicon)

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

The codepen has been updated