中心文字和锚标签中的图标

Question

I'm a beginner at web dev. I want to make a button that has one text and one icon on two separate lines. Since the button is rectangular, I want the text and the icon to be both vertically and horizontally centered to make them look pretty. How should I do about this? Thank you.

 .typeA { width: 80%; height: 90%; margin: 0 auto; display: flex; justify-content: center; } .typeA span { display: inline-block; } 

 <div class="wrapper"> <a href="#" class="btn typeA"> <span>ABC <br> <img src="https://placehold.it/60x60" alt="icon" style="width:60px;"> </span> </a> </div> 

Answer 1

Check the following code

 .typeA{ width: 80%; height: 150px; margin:0 auto; display: flex; justify-content: center; align-items:center; background:pink; } .typeA span{ display: inline-block; } 

 <div class="wrapper"> <a href="test1.html" class="btn typeA"> <span>ABC <br> <img src=".." alt="icon" style="width:60px;"> </span> </a> </div> 

Suggesting you to give a certain height to your button in pixels since your height in percentage won't have any effect to your button

Answer 2

Just this CSS should do it:

.typeA {
    display: block;
    width: 80%;
    height: 90%;
    margin:0 auto;
    text-align: center;
}

You should center the content using text-align . There is no need for flex here, as flex actually tries to put several elements on one line.

Answer 3

I used a button , and a <i> as fake icon. The text is in a span , so you can style the text via span if you want to.

HTML

<button>
  <i id="fake"></i>
  <span>Click</span>
</button>

CSS

button {
  width: 100px;
}

#fake {
  width: 15px;
  height: 15px;
  background: #ff0000;
  position relative;
  margin: 0 auto;
}

button span {
  display: block;
  padding: 3px 0;
}

Hope you can work with it. If you don't want to use a button , I would go the same way like the other answers. Set a width and height to <a> and center the text by align and the icon, like explained.

Answer 4

The following should work!

In HTML

<a href="">
 <div class="button">
  <img src="file" height="20px" width="20px"/>
  <div>Click me</div>
 </div>
</a>

In CSS

.button{
  text-align:center;
  padding:5px;
  background-color:#ddd;
  width:100px;
}
a{
  text-decoration:none;
}

Answer 5

Try this simple css to align div vertically and horizontally.

 .typeA { width: 80%; margin:auto; height: 90vh; align-items: center; display: flex; } .typeA SPAN{ margin:auto; text-align:center;} 

 <div class="wrapper"> <a href="#" class="btn typeA"> <span>ABC <br> <img src="https://placehold.it/60x60" alt="icon" style="width:60px;"> </span> </a> </div>