Question

<div class="user-box text-center">
                        <img src="assets/images/users/user-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle img-thumbnail avatar-md">
                        <div class="dropdown">
                            <span class="user-name h5 mt-2 mb-1 d-block">Nowak Helme</span>
                        </div>
                        <p class="text-muted">Admin Head</p>
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <div class="dropdown">
                                    <a href="#" class="text-muted dropdown-toggle h5 mt-2 mb-1 d-block" data-toggle="dropdown"  aria-expanded="false">
                                        <i class="fas fa-cog"></i>
                                    </a>
                                    <div class="dropdown-menu user-pro-dropdown">

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <i class="fe-user mr-1"></i>
                                            <span>My Account</span>
                                        </a>

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <i class="fe-settings mr-1"></i>
                                            <span>Settings</span>
                                        </a>

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <i class="fe-lock mr-1"></i>
                                            <span>Lock Screen</span>
                                        </a>

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <i class="fe-log-out mr-1"></i>
                                            <span>Logout</span>
                                        </a>

                                    </div>
                                </div>
                            </li>

                            <li class="list-inline-item">
                                <a href="#">
                                    <i class="fas fa-power-off"></i>
                                </a>
                            </li>
                        </ul>
                    </div>

以上是我的代码。我想将下拉列表的用户框元素居中。请帮助我解决我的问题。我已附上屏幕截图供您参考。我已经在线阅读了一些参考资料，但找不到适合的解决方案。

Screenshot

Answer 1

.a { font-size: 50px; line-height: 1em; }
div { outline: 2px dotted #aaa; }

.wrapper {
  background: #eee;
  width: 15em;
  height: 10em;
  margin: 0 auto;
  
  /* center */
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="wrapper">
  <div class="a">??‍♀️</div>
  <div>Center Thyself</div>
</div>

将div元素居中

1 个答案: