html - CSS-在标题中以响应方式将 Logo 居中，名称在其两侧-6ren

html - CSS-在标题中以响应方式将 Logo 居中，名称在其两侧

转载作者：行者123 更新时间：2023-11-28 04:34:58

24

4

我很难将 Logo 置于页眉的中心。正确显示时是这样的: "Name"Logo "Surname"。作为logo在中间，"name"和"surname"显示在它的两边，"name"在它的左边，"surname"就对了。(你会更好地理解我发布的图片)

Header: logo not centered

所以我希望带圆圈的 Logo 位于页眉的中心，然后让“Pousada”在右侧适应它，与“团队”在左侧适应。

这是我的 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，但效果不佳。我在这里尝试的是使用内联 block 使此 header 的 3 个元素(“Pousada”、“ Logo ”和“团队”)对齐。

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

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

最好的问候，米格尔

最佳答案

这里有一个快速修复方法:我为 div 添加了背景色以帮助您识别它们。

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

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

CSS:我使用单行方法编写我的 css。您可以轻松调整 Logo 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 - CSS-在标题中以响应方式将 Logo 居中，名称在其两侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41535563/

24

4

0

文章推荐： html - 在 hamburger bootstrap4 之前添加组件

文章推荐： html - 如何将链接直接放在表单域下方？

文章推荐： html - 导航栏不起作用

html - 标题/标题
我附上了一个我尝试使用 html/css 实现的示例(如果您看不到图像:名字和姓氏，然后第二行是职位描述)。我希望所有文本(两行)在一个 div 中强制对齐(左和右)，但我不确定这是否可能。我尝试了一
html - Div 标题/标题
我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。 Youtube Achievements
Android EditText 标题(标题)就像在 android 指南中
我想让每个 EditText 对象都有自己的标题，就像 Pure Android 指南中那样 (screenshot) 这个东西有原生支持吗？我想他们也可能会使用带有部分的 ListView ，但这对
swift - UICollectionView 标题 View 类似于表格 View 标题(不是节标题)
是否可以像 UITableView headerView 一样创建 UICollectionView 标题 View ？我的意思是整个集合 View 的标题 View ，而不是每个部分的重复 View
android - Material Design 排版 - 标题、标题、间距、文本外观
我一直在遵循有关排版的 Google 官方 Material 设计指南 (http://www.google.com/design/spec/style/typography.html)，但我发现它们
python - 是否有 Python 库来提取视频元数据，例如 [标题、描述、标题/字幕]？
我目前正在尝试找到可以帮助我从视频文件中提取元数据或信息的 python 库，例如 [ mp4, Mkv, Avi, WebM, mpg ] 格式为例。我主要从视频文件中提取的主要数据是 [标题、描
html - Bootstrap 缩略图 - 中心内容(img + 标题)，标题 float :left
你好，这是我正在尝试做的: 将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3，标题必须是 span4。这是我的问题: 我可以获取内容中心，或者标题 float 在 im
ios - UINavigationBar 后退按钮在某些设备或模拟器上显示 "Back"标题，在其他设备或模拟器上显示之前的 View Controller 标题
我有一个带有导航栏的应用程序，可以从一个 View Controller 导航到下一个 View Controller 。在某些模拟器和设备上导航到下一个 View Controller 时，后退按钮
sql - t-sql 这是如何工作的？ SELECT @MyList = ISNULL(@MyList ,'') + 标题 + ', ' FROM 标题
我遇到了一些非常酷的 t-sql，可以从一个 t-sql 查询中的选定行生成一个逗号分隔的列值列表: SELECT @MyList = ISNULL(@MyList,'') + Title + ',
HTML 标题
请确保将 HTML heading 标签只用于标题。不要仅仅是为了生成粗体或的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标
每页上的 wkhtmltopdf 标题
我正在使用 wkhtmltopdf 将 html 转换为 pdf。我想在每个页面中添加标题，但它只显示在第一页(目录)中。我使用的命令是 "C:\Program Files\wkhtmltopdf
r - 如何在ggplot2中显示obs的方向(标题)
如何使用 ggplot2 显示观察的方向(标题)？有没有办法调整shape=17 (三角形)以便它“指向”下一次观察？示例代码 library(ggplot2) dat % pivot_wide
macos - 标题&&关闭按钮不显示
我尝试在 cocoa 应用程序中显示/隐藏标题栏。我使用以下代码: if ([window styleMask]==NSResizableWindowMask) { [wind
文本字段上的 JavaScript 标题
我有这样的 HTML 标题 http://s1.postimg.org/4ebyk3qwv/image.png 当我编写这段代码时: document.getElementById("TL85_1_
wordpress - 在Facebook上与视频共享URL不显示描述/标题
我叫麦克。谢谢你的帮助。在Wordpress中，我们已经设计了我们的网站，以便在Facebook调试器中og数据尽可能接近youtube。尽管如此，在Facebook上共享视频的方式还是不同的。尽管
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
SAPUI5 - 标题、侧边栏和导航
我是 SAPUI5 的新手，在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页，如下所示:
go - “标题”注释的目的
我最近在为客户做的项目中被介绍给Go。他们已经建立了代码库，需要进行一些更改。我注意到所有的方法，结构等等都有一些奇怪的类似于标题的注释，如下所示: // SomeType ... type Som
java - ListView 标题
我创建了一个采用整个屏幕布局的标题布局(xml 文件)... 我还创建了一个 listView 并将此 header_layout 添加到 listView 中: LayoutInflater inf

首页

博学

6Ren·AI

商城

html - CSS-在标题中以响应方式将 Logo 居中，名称在其两侧