如何在按钮中居中对齐图标？ [英] How to center align icon inside button?

问题描述

.close-button button {
  border: 1px solid black;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  outline: none;
}

.close-button {
  margin-right: 50%;
  margin-top: 7%;
  /*  I wrote to center the button */
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<button type="button" data-toggle="modal" data-target="#exampleModal" class="btn btn-success">Click</button>

<div class="modal" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content" style="height:100px;">
      <div class="close-button">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
    </div>
  </div>
</div>

例子

Example

https://www.w3schools.com/code/tryit.asp?filename=FTCZIK9F0A66

我尝试过：

What I have tried:

Text-align:center or line-height:50% not working. How can fix it ? Thank you.

推荐答案

好的。看一下这个例子，我假设你想看到按钮中心的X图标。您可以尝试将图标包装在一个元素中，然后弄乱显示和边距。



这是一个例子



Tryit Editor v3.5 [ ^ ]

OK. Looking at the example, I'm assuming you want to see the X icon in the center of the button. You can try wrap the icon in an element and then mess with the display and margin.

Here is an example

Tryit Editor v3.5[^]

这篇关于如何在按钮中居中对齐图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！