Question

我正在尝试建立一个网站，它就像我所说的那样，在其导航栏上方有一个横幅横幅中有两个图像。我打算将一个图像与横幅中的右边对齐，并将一个图像与中心对齐，无论是垂直还是水平。
我试过了margin:auto;，但它仍然没有把它放在中心位置请建议一种不涉及固定值的方法，以及不影响CSS（图像）中提供的高度和宽度的方法。
另外，如果您知道，请告诉我如何保持CSS中定义的高度和宽度无论如何？

我想要居中的图片是：banner_txtcombo

HTML：

 <body>

    <div class="brdr_top"></div> <!-- A little gold border at the top -->

    <div  class="header" id="banner"> 
        <img src="http://i.imgur.com/NJJKSXh.png" id="banner_txtcombo"/> <!-- The LMUN text image -->
        <img src="http://i.imgur.com/OrPKrUc.png" id="banner_logo"/> <!-- The LMUN Logo -->
    </div>

    <div class="header" id="navbar"> <!-- The navigation bar and contents *begins* -->

        <div class="nb_item"><span id="space"></span>HOME<span id="space"></span></div>

        <div class="nb_item">ABOUT US <span id="dArrow"></span>
            <ul id="abtus_menu">
                <li class="nb_item_li"><a href="http://www.lamartinierelucknow.org/" target="_blank">LA MARTINIERE COLLEGE</a></li>
                <li class="nb_item_li">LMUN 2015</li>
                <li class="nb_item_li">SECRETARIAT</li>
            </ul>
        </div>

    <div class="nb_item"><span id="space"></span>REGISTER <span id="dArrow"></span>
        <ul id="rgstr_menu">
            <li class="nb_item_li">INDIVIDUAL</li>
            <li class="nb_item_li">DELEGATION</li> 
        </ul>
    </div>

    <div class="nb_item"><span id="space"></span>COMMITTEES <span id="dArrow"></span>
        <ul id="comt_menu">
            <li class="nb_item_li">COMMITTEE 1</li>
            <li class="nb_item_li">COMMITTEE 2</li>
            <li class="nb_item_li">COMMITTEE 3</li>
            <li class="nb_item_li">COMMITTEE 4</li>
            <li class="nb_item_li">COMMITTEE 5</li>
            <li class="nb_item_li">COMMITTEE 6</li>
        </ul>
    </div>

    <div class="nb_item"><span id="space"></span>RESOURCES <span id="space">
</span></div>

    <div class="nb_item">EVENTS <span id="dArrow"></span>
        <ul id="evnt_menu">
            <li class="nb_item_li">KEYNOTE SPEAKERS</li>
            <li class="nb_item_li">SOCIALS</li>
        </ul>
    </div>

    <div class="nb_item"><span id="space"></span>SPONSORS</div>

        <div class="nb_item"><span id="space"></span>CONTACT US<span id="space">                          
</span></div>

CSS：

.html
{
    background-color: #FFFFFF;
}

body
{
    margin: 0;
    padding:0;
}
/* Everything above + navbar begins(visually) */
.brdr_top
{
    display:flex;
    height: 5px;
    width: 100%;
    background-color: #FFD700;
}

.header
{
    width: 80%;
    margin:auto;
    padding:0;
    display:flex;   
}

#banner
{
    height: 200px;
    width: 80%;
    background-color: #FFFFFF;
}

#banner_txtcombo
{
    height: 120px;
    width: 696px;
    position:static;
    margin:auto;
    display:inline-block;
}

#banner_logo
{
/* Aspect ratio to be maintained: width = height(in pixels) * 1.7043 */
    height: 180px;
    width: 307px;
    margin-left:auto;
    margin-top:auto;
    margin-bottom:auto;
    display:inline-block;
}

#navbar
{
    background-color: #70A5DA;
    height: 28px;   
}
/* Navbar + Everthing above it ends(visually) */

/* Items in the navbar and their actions begins*/ 
.nb_item
{
    display:inline-block;
    width:auto;
    padding:0px 10px;
    color:#FFFFFF;
    margin:auto;
    text-align:center;
    line-height:28px;
    position:relative;
}

.nb_item #dArrow:after
{
    display:inline;
    color: #FFFFFF;
    content: '\25BC' ;
}

.nb_item:hover #dArrow:after
{
    display:inline;
    content: '\2003';
}

.nb_item #space:after
{
    display:inline;
    content: '\2003';
}

/* Done to make dropdown options have even darker tone on hover *Start* */
.nb_item_li:hover
{
    color:#CCCCCC;
}
/* *End* */

a
{
    text-decoration: none;
    color: #DDDDDD;
}

a:hover
{
    color: #CCCCCC;
}

/* Done because of bug causing about us menu to drop even before hovering     on it *Start* */
.nb_item ul
{
    position:absolute;
    padding:0;
    margin:0;
    text-align:left;
    display:none;
    width:15em;;
    height:28px;
}

.nb_item:hover ul
{
    display:block;
} 
/* *End* */

.nb_item:hover
{
    color: #DDDDDD;
    cursor:pointer; /* To get that hand symbol */
}

#abtus_menu li
{
    list-style-type:none;
    display:none;
}

.nb_item:hover #abtus_menu li
{
    display:block;
} 

#rgstr_menu li
{
    margin-left:1em;
    list-style-type:none;
    display:none;
}

.nb_item:hover #rgstr_menu li
{
    display:block;
}

#comt_menu li
{
    margin-left:1em;
    list-style-type:none;
    display:none;
}

.nb_item:hover #comt_menu li
{
    display:block;
}

#evnt_menu li
{
    list-style-type:none;
    display:none;
}

.nb_item:hover #evnt_menu li
{
    display:block;
}

.menu li
{
    display:inline;
}
/* Items in the navbar and their actions end */

这是JSFiddle：JSFiddle

Answer 1

应用text-align：center和position：相对于#banner。然后应用一个位置：绝对，右：0到#banner_logo。

这应该居中#banner_txtcombo并且#banner_logo在右边。

JSFiddle：http://jsfiddle.net/8zwu3cgb/3/

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

 // include your layout code here

</android.support.v7.widget.CardView>

.html {
  background-color: #FFFFFF;
}
body {
  margin: 0;
  padding: 0;
}
/* Everything above + navbar begins(visually) */

.brdr_top {
  display: flex;
  height: 5px;
  width: 100%;
  background-color: #FFD700;
}
.header {
  width: 80%;
  margin: auto;
  padding: 0;
  display: flex;
}
#banner {
  height: 200px;
  width: 80%;
  background-color: #FFFFFF;
  position: relative;
  text-align: center;
}
#banner_txtcombo {
  height: 120px;
  width: 696px;
  position: static;
  margin: auto;
  display: inline-block;
}
#banner_logo {
  /* Aspect ratio to be maintained: width = height(in pixels) * 1.7043 */
  height: 180px;
  width: 307px;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
#navbar {
  background-color: #70A5DA;
  height: 28px;
}
/* Navbar + Everthing above it ends(visually) */

/* Items in the navbar and their actions begins*/

.nb_item {
  display: inline-block;
  width: auto;
  padding: 0px 10px;
  color: #FFFFFF;
  margin: auto;
  text-align: center;
  line-height: 28px;
  position: relative;
}
.nb_item #dArrow:after {
  display: inline;
  color: #FFFFFF;
  content: '\25BC';
}
.nb_item:hover #dArrow:after {
  display: inline;
  content: '\2003';
}
.nb_item #space:after {
  display: inline;
  content: '\2003';
}
/* Done to make dropdown options have even darker tone on hover *Start* */

.nb_item_li:hover {
  color: #CCCCCC;
}
/* *End* */

a {
  text-decoration: none;
  color: #DDDDDD;
}
a:hover {
  color: #CCCCCC;
}
/* Done because of bug causing about us menu to drop even before hovering     on it *Start* */

.nb_item ul {
  position: absolute;
  padding: 0;
  margin: 0;
  text-align: left;
  display: none;
  width: 15em;
  ;
  height: 28px;
}
.nb_item:hover ul {
  display: block;
}
/* *End* */

.nb_item:hover {
  color: #DDDDDD;
  cursor: pointer;
  /* To get that hand symbol */
}
#abtus_menu li {
  list-style-type: none;
  display: none;
}
.nb_item:hover #abtus_menu li {
  display: block;
}
#rgstr_menu li {
  margin-left: 1em;
  list-style-type: none;
  display: none;
}
.nb_item:hover #rgstr_menu li {
  display: block;
}
#comt_menu li {
  margin-left: 1em;
  list-style-type: none;
  display: none;
}
.nb_item:hover #comt_menu li {
  display: block;
}
#evnt_menu li {
  list-style-type: none;
  display: none;
}
.nb_item:hover #evnt_menu li {
  display: block;
}
.menu li {
  display: inline;
}
/* Items in the navbar and their actions end */

Answer 2

您可以使用此代码，我希望这可以帮助您

css更改：

 Output:
 Twelve,TwentyThree,Fourteen,Fifteen,Nine
 One,Two,Three,Four,Five
 .
 .

html更改：

#banner_txtcombo {
            height: 120px;
            width: 100%;
            position: static;
            margin: auto;
            display: inline-block;
        }

        #banner_logo {
            /* Aspect ratio to be maintained: width = height(in pixels) * 1.7043 */
            height: 180px;
            width:100%;
            margin-left: auto;
            margin-top: auto;
            margin-bottom: auto;
            display: inline-block;
        }

当div中存在2个图像时，仅居中1个图像

2 个答案: