CSS-在标题中以响应方式居中徽标，名称在其两侧答案

【问题标题】：CSS- responsively centering logo in header with the name on it's sidesCSS-在标题中以响应方式居中徽标，名称在其两侧
【发布时间】：2017-01-09 02:37:35
【问题描述】：

我很难将徽标放在标题的中心。正确显示时，它看起来像这样： "Name" Logo "Surname" 。作为标志在中间，“name”和“surname”显示在它的两侧，“name”在它的左边，“surname”就对了。（看我发的图你就明白了）

Header: logo not centered

所以我希望带圆圈的徽标成为标题的中心，然后让“Pousada”适应它的右侧，并与左侧的“Team”相同。

这是我的 CSS 和 HTML：

*{
  font-family: 'Oswald', sans-serif;
 }

#rafa {
  background-color: #000000;
  background-repeat:no-repeat;
  background-position: 40% 0;
  background-size:30%;
  color: #fff;
  padding: 0.5rem 0 0 0;
  border-top:none;
  
  }
  
  
#BJJ {
  text-align:center;
  height: 4rem;
  font-weight: normal;

 }
 
 
.escudo{
  text-align:center;
  
 
  }
  
.group:after {
  content: "";
  display: table;
  clear: both;
  
 }
  

 
#uno {
  text-align:center;
  vertical-align:middle;
  font-size: 2em;
  display:inline-block;
  }
 
#dos {
  text-align:center;
  font-size:2em;
  display:inline-block;
  vertical-align:middle;
  
 }

img {
  max-width: 15%;
  clear:both;
  display:inline-block;
  vertical-align:middle;
  
 
  }
 
ul {
  color: #000;
  list-style: none;
  text-align:center;
  background: #fff;
  border-bottom: solid #000 1.5px;
  padding:0;
  height: 2.5em;
  border-top:none;
  
 
 }
 
li {
  display:inline-block;
  padding: 0 1em;
  border-right: 2px;
  }
  
#welcome{
  text-align:center;
 } 
/************ESTILO LINKS*************/
li a {
text-decoration:underline;
color: #000;
}

.Inicio {
color: #fff;
text-decoration:none;
 }

/*****************ARTE SOAVE*******************/

/*****************EL EQUIPO*******************/

/*****************LA ESCUELA*******************/

<!DOCTYPE html>
<html lang="en">
  <head> 
    <meta charset="utf-8"> 
	<link href="Treehouse Programación/Recursos/normalize.css" rel="stylesheet">
	<link href="estilo.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto+Condensed:300" rel="stylesheet">
    <title>Pousada Team Brazilian Jiu-Jitsu</title>
  </head>
  <body>
  	<header id="rafa">
	<a href="Pousada Team.html" class="Inicio">
	  <h3 id="BJJ">Brazilian Jiu-Jitsu</h3>
	  <div class="escudo group">
	    <h3 id="uno">Pousada</h3>
        <img src="309011_3565552909659_642031164_n.jpg"/>
     	<h3 id="dos">Team</h3>
	  </div>
	</a> 
	</header>
	
	<nav>
	  <ul>
	    <li><a href="Arte Soave.html">Arte soave</a></li>
	    <li><a href="El Equipo.html">El Equipo</a></li>
		<li><a href="La Escuela.html">La Escuela</a></li>
	  </ul>
	</nav>
	
	<div id="welcome">
	  <h3>Bienvenido al equipo</h3>
	</div>
	
	<div>
	</div>

  </body>
</html>

我尝试过使用 float，但效果不佳。我在这里尝试的是使用 inline-block 使该标题的 3 个元素（“Pousada”、“logo”和“Team”）对齐。

我对这个特定问题的任何帮助以及任何内容建议（或项目实践）以完全理解 HTML 和 CSS 原则（如布局和定位），以便我可以学习它们并转向更多功能方面，如 Javascript，将是非常感谢，您完全可以期待我能提供的任何帮助。

提前致谢，如果我能做些什么来让这个地方变得更好，请告诉我。

最好的问候，米格尔

【问题讨论】：

标签： html css layout responsive-design

【解决方案1】：

这里有一个快速解决方法：我为 div 添加了背景颜色以帮助您识别它们。

HTML: 添加您的标题，在标题中添加您的徽标......然后在徽标 div 中添加名字和姓氏。通过在徽标内添加名称；每当您移动徽标时，名称都会相对于它移动。

<div class="Header">
  <div class="Logo">
    <div class="FirstName">FirstName</div>
    <div class="LastName">LastName</div>
  </div><!-- End CenterContent -->
</div><!-- End Header -->

CSS：我使用单行方法来编写我的 css。您可以轻松调整徽标 DIV 的尺寸，并且可以根据需要移动名称。

.Header{position:relative; width:100%; height:300px; display:block; float:left; background:SILVER;}
.Logo{position:relative; margin:auto; width:200px; height:200px; background:BLACK;}
.Logo > .FirstName{position:absolute; top:90px; left:-100px; min-width:1em; text-align:center;}
.Logo > .LastName{position:absolute; top:90px; right:-100px; min-width:1em; text-align:center;}

欢迎您。

【讨论】：

感谢您的帮助！
然而，我对标志的意思是我想要在中心出现的图像。也许您在回答中考虑到了这一点，但我不明白，但我不知道图像在您刚刚编写的 HTML 中的位置 :S 。再次感谢 Miguel ;D。