垂直和水平始终在导航栏中的空间中心对齐图像

Question

我有一个 Bootstrap Fixed 响应式导航栏，按钮左侧有一个图像。我使用媒体查询使间距响应，现在我有这个代码：

我的 CSS：

.nav > li > a:hover
{
    background-color: #FCC;
}
.navbar-header
{
    float: right;
}
.navbar-default
{
    background-color: #00b5fe;
    border-color: #0089ff;
}
.navbar-default .navbar-brand
{
    color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus
{
    color: #ffffff;
}
.navbar-default .navbar-text
{
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a
{
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus
{
    color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu
{
    background-color: #00b5fe;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a
{
    color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus
{
    background-color: #0089ff;
    color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider
{
    background-color: #00b5fe;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus
{
    background-color: #0089ff;
    color: #ffffff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus
{
    background-color: #0089ff;
    color: #ffffff;
}
.navbar-default .navbar-toggle
{
    border-color: #0089ff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus
{
    background-color: #0089ff;
}
.navbar-default .navbar-toggle .icon-bar
{
    background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form
{
    border-color: #ffffff;
}
.navbar-default .navbar-link
{
    color: #ffffff;
}
.navbar-default .navbar-link:hover
{
    color: #ffffff;
}
@media (max-width: 767px)
{
    .navbar-default .navbar-nav .open .dropdown-menu > li > a
    {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus
    {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus
    {
        background-color: #0089ff;
        color: #ffffff;
    }
}
@media (min-width: 767px)
{
    body
    {
        padding-top: 230px;
    }
}
@media (max-width: 767px)
{
    body
    {
        padding-top: 130px;
    }
}
@media (min-width: 768px)
{
    #resize
    {
        width: 30%;
    }
}
@media (min-width: 768px)
{
    #alignp
    {
        text-align: center;
    }
}

还有我的 HTML：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" id="navbar-blue">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
                </button>
            </div>
            <p></p>
            <p id="centerp">
                <img align="left" id="resize" width="60%" src="../logo.png" alt="Coding Kids" style="display:block; margin-left: auto; margin-right: auto; margin-bottom: 20px;">
            </p>
            <br />
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li><a></a></li>
                    <li class="active"><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="/">Products<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Silver</a>
                            </li>
                            <li><a href="#">Silver+</a>
                            </li>
                            <li><a href="#">Gold</a>
                            </li>
                            <li><a href="#">Gold+</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Contact</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" data-toggle="modal" data-target="#signUp"><img src="images/register.png" width="20"> Sign Up</a>
                    </li>
                    <li><a href="#" data-toggle="modal" data-target="#logIn"><img src="images/login.png" width="20"> Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="signUp" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Sign Up</h4>
                </div>
                <div class="modal-body">
                    <p>Sign Up Box Goes Here</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div id="logIn" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Login</h4>
                </div>
                <div class="modal-body">
                    <p>Login Box Goes Here</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="well">
        {tag_pagecontent}
    </div>
    <div class="panel panel-default" style="background-color: black; clear: both;">
        <div class="panel-body" style="background-color: black; color: white;">&copy; Coding Kids</div>
    </div>

此页面的工作版本是here。

正如您在我的工作版本中看到的，当您调整窗口大小时，徽标会改变位置。目前，它看起来不是很整洁，因为它一直在改变位置。我想要的只是徽标始终在其拥有的空间中水平和垂直居中。我将如何编辑我的 CSS 和媒体查询以适应这种情况？

Answer 1

只需更改对齐方式即可。

            <img align="centre" id="resize" width="60%" src="../logo.png" alt="Coding Kids" style="display:block; margin-bottom:20px;>

如果它没有尝试添加一个 div 并在其中设置图像：

            <div align="centre"><img align="left" id="resize" width="60%" src="../logo.png" alt="Coding Kids" style="display:block; margin-left: auto; margin-right: auto; margin-bottom: 20px;"></div>

你也可以使用

<div style="text-align:centre;">

改为 CSS 规则。