Question

我做了一个标题，里面有两个div。一个拥有图片，一个拥有链接。我希望图像位于页面的中心，但链接在右侧。我该如何实现？

function view() {
  document.getElementById('topmenu').setAttribute('style', 'display:block');
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (max-width: 1200px) {
  header {
    width: 80%;
    margin: auto;
  }
}

@media only screen and (min-width: 1201px) {
  header {
    width: 1000px;
    margin: auto;
  }
}

#topbar {
  overflow: auto;
}

#topmenu {
  display: none;
}

<header class="clearfix">
  <div id="topbar">
    <div style="float: left;">
      <div style="text-align: center; clear: both;">
        <img src="http://lorempixel.com/200/200" style="clear: both;">
      </div>
    </div>
    <span style="float: right;"><a href="#!" onclick="view()">MENU</a></span>
  </div>
  <div id="topmenu">
    some text here
  </div>
</header>

Answer 1

尝试这样

function view() {
			document.getElementById('topmenu').setAttribute('style', 'display:block');
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (max-width: 1200px) {
	header {
		width: 80%;
		margin: auto;
	}
}

@media only screen and (min-width: 1201px) {
	header {
		width: 1000px;
		margin: auto;
	}
}

#topbar {
	overflow: auto;
}
#topmenu {
	display:none;
}

<header class="clearfix">
		<div id="topbar">
			<div align="center">
				<div style="text-align: center; clear: both;">
					<img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png" style="clear: both;">
				</div>
			</div>
			<span style="float: right;"><a href="#!" onclick="view()">MENU</a></span>
		</div>
		<div id="topmenu">
			some text here
		</div>
	</header>

Answer 2

通过删除float：left属性，您的徽标将放置在中间。但是，我不确定您的float属性是否用于其他目的。我已更改您的图片以用于说明。

function view() {
			document.getElementById('topmenu').setAttribute('style', 'display:block');
}

  .clearfix:after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (max-width: 1200px) {
	header {
		width: 80%;
		margin: auto;
	}
}

@media only screen and (min-width: 1201px) {
	header {
		width: 1000px;
		margin: auto;
	}
}

#topbar {
	overflow: auto;
}
#topmenu {
	display:none;
}

<header class="clearfix">
		<div id="topbar">
			<div style="">
				<div style="text-align: center; clear: both;>
">
					<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e" height="50px" width="50px" style="clear: both;">
							<span style="float: right;"><a href="#!" onclick="view()">MENU</a></span>

				</div>
			</div>
		</div>
		<div id="topmenu">
			some text here
		</div>
	</header>

Answer 3

对此进行检查，仅添加边框以查看其对齐方式。我在div元素中添加了link元素，并且添加了一个将元素对齐到右侧的类。包含图像的div元素的宽度大于链接div。您也可以根据图片尺寸设置高度。

.clearfix:after {
      content: "";
      display: table;
      clear: both;
    }

    @media only screen and (max-width: 1200px) {
    	header {
    		width: 80%;
    		margin: auto;
    	}
    }

    @media only screen and (min-width: 1201px) {
    	header {
    		width: 1000px;
    		margin: auto;
    	}
    }

   .img_div{width:70%;border:1px solid red;text-align:center;}
   .right_side{ width:20%;border:1px solid red;text-align:center;float:right; }
    
    #topbar {
    	overflow: auto;
	}
    
    #topmenu {
    	display:none;
    }

 <header class="clearfix">
    <div id="topbar">
    	<div class="img_div" style="float:left;">
           <img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png" style="margin: 0 auto;">
    	</div>
        <div class="right_side">
           <span><a href="#!" onclick="view()">MENU</a></span>
        </div>				
     </div>
     <div id="topmenu">
          some text here
     </div>
 </header>

Answer 4

尝试一下；仅通过使用flexbox和绝对位置来完成； flexbox允许您对齐容器内的项目；但是由于每个元素都占用一些空间，通常的行为是在使项目居中时考虑了该大小，因此图像在左侧看起来有点；

通过在按钮上使用position: absolute，我们将其移出该弹性容器的流程之外，并对其进行独立对齐；现在flex容器只考虑图像的大小并将其水平居中。

body * {
  box-sizing: border-box;
}

.bar {
  display: flex;
  justify-content: center;
  position: relative;
  border: 1px solid black;
}

.img img {
  display: block;
}

.button button {
  position: absolute;
  right: 0;
  top: 40%;
}

<div class="bar">
  <div class="img">
    <img src="https://via.placeholder.com/150x100">
  </div>

  <div class="button">
    <button>Menu</button>
  </div>
</div>

或者，如果出于任何原因要避免使用Flexbox，请在按钮处于绝对位置的情况下对图像应用margin，将获得几乎相同的结果

body * {
  box-sizing: border-box;
}

.bar {
  position: relative;
  border: 1px solid black;
}

.img img {
  display: block;
  margin: 0 auto;
}

.button button {
  position: absolute;
  right: 0;
  top: 40%;
}

<div class="bar">
  <div class="img">
    <img src="https://via.placeholder.com/150x100">
  </div>

  <div class="button">
    <button>Menu</button>
  </div>
</div>

如果右侧有div，如何将图像居中？

4 个答案: