0

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

Still, I'm having elementary issues.

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

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

    float: left;
    /*height: 100%;*/
}
<div class="banner_box">
    <img class="left_center_myicon" src="myicon.svg" />
</div>

<div class="banner_box">
    <a href="index.html"><img class="left_center_myicon" src="myicon.svg" /></a>
</div>

where myicon.svg consists of one rectangle:

<?xml version="1.0" encoding="UTF-8"?>
<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>

Despite that I am specifying float: left on both instances of left_center_myicon, it floats to the left only if it's inside an <a> tag.

Now my icon is rather small. I can easily make it fill the height of banner_box by adding height: 100%. In the lower banner_box that of course makes the icon 100% of just the anchor.

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

In short, I am able to either left-center an icon

centering, not height adjusted

or enlarge it to some percentage

centering, not left floated

but not both.

Calaf
  • 10,113
  • 15
  • 57
  • 120
  • I'm really not at my best with SVG for some reason but could it be possible to position it using position:absolute? If so you could probably get left-center that way? – Cutey from Cute Code Oct 23 '21 at 16:56

2 Answers2

0

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

Ali Mustafa
  • 676
  • 3
  • 14
  • Sure... I suppose you could use an icon from font-awesome. But as you see when you run your code, the icon does not float left. It is in the horizontal center. – Calaf Oct 23 '21 at 20:36
0

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

JCrook
  • 411
  • 3
  • 7
  • ok... cool.. but this enlarges the icon and keeps it in the center both horizontally and vertically. I'd like to enlarge it and keep it in the vertical center floating _left_, not in the horizontal center. – Calaf Oct 23 '21 at 20:34
  • Ah i see, ok that's fine I've amended the above code. Change left:50% to left:0; & transform from -50%, -50% to 0%, -50% – JCrook Oct 23 '21 at 20:41
  • But the `left: 0;` is irrelevant then, no? It's the `float: left;` that's responsible for, well, floating left. It's cool. The `transform` seems a bit like a patch though. I need to play with it a bit more. In particular, if you're saying `top: 50%` and `height: 70%`, then the translation should be for just `35%`, no? – Calaf Oct 23 '21 at 23:20
  • Well it depends, you could adjust the left position whilst floating it left using this example. The height was set to 70% for demonstration it could be changed, again, there are many ways to achieve what you want, my answer was a simple solution to your question and the code you used. The method would of course vary depending on what you relate this too but either way, hope this helped :) – JCrook Oct 23 '21 at 23:53
  • @Crook It helps, but that the translation is not for 35% (half 70%) makes it look like magic ;-) – Calaf Oct 24 '21 at 01:27
  • Hmm.. I thought it was right, but Safari doesn't like it. In Chrome it's good, but in Safari the icon appears aligned with the bottom of the banner_box. – Calaf Oct 24 '21 at 02:26
  • hm.. sorry, I can't get on safari as i;m on wndows. Did you manage to find a solution? – JCrook Oct 29 '21 at 19:26
  • Only approximate hacks, not solutions to the problem as stated. Side-tracked, but will return to this issue shortly. – Calaf Nov 01 '21 at 13:27