我正在为网站制作标题。我想在我的标题中找到我的网站的图片和名称。
问题在于文本非常难看。我想向上推文本以使其居中。
我认为问题将如何解决:
我怀疑答案与padding
或margin
有关,但我修复的所有尝试都没有做任何事情。
我的代码:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Camels</title>
<link rel="StyleSheet" type="text/css" href="StyleSheet.css">
</head>
<body>
<div id="header">
<div class="main-pannel">
<img id="logo" src="http://www.jamaicaobserver.com/assets/10972047/camel.jpg">
<p id="title">Camelsgggg</p>
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
#header {
margin: 0px;
padding: 0px;
background-color: #992e0c;
height:100px;
width:fill-available;
}
.main-pannel:hover{
background-color: #cecece;
}
#logo{
height: 100px;
width: 100px;
display: inline-block;
}
#title{
display: inline-block;
font-size: 50px;
color: #000;
}
任何帮助表示赞赏! :)〜枪手
答案 0 :(得分:1)
尝试使用此标题css,使用transform通过css移动它。
#title{
display: inline-block;
font-size: 50px;
color: #000;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%)
}
要将其向右移动,您也可以随时使用translateX。
答案 1 :(得分:0)
首先,您在课程<div class="main-pannel">
中有拼写错误。猜猜它应该是main-panel
。
其次,定义line-height:100px;
css等效于包含文本的元素的div高度。在您的情况下,它应该是main-panel
。这应该把文本推到中间。
的jsfiddle:
答案 2 :(得分:0)
试试这段代码。我使用了浮动技术并添加了一些填充。
<body>
<div id="header">
<div class="main-pannel">
<img id="logo" src="http://www.jamaicaobserver.com/assets/10972047/camel.jpg">
</div>
<div class="main-title">
<p id="title">Camelsgggg</p>
</div>
</div>
</body>
body {
margin: 0px;
padding: 0px;
}
#header {
background-color: #992e0c;
height:100px;
width:100%;
}
.main-panel:hover{
background-color: #cecece;
}
#logo{
height: 100px;
width: 100px;
display: inline-block;
float: left;
}
#title{
display: inline-block;
font-size: 50px;
color: #000;
margin: 0;
padding-top: 20px;
}
.main-title {
float: right;
}