Question

问题：

我正在为网站制作标题。我想在我的标题中找到我的网站的图片和名称。

问题在于文本非常难看。我想向上推文本以使其居中。

我认为问题将如何解决：

我怀疑答案与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;
}

任何帮助表示赞赏！ :)〜枪手

Answer 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。

Answer 2

首先，您在课程<div class="main-pannel">中有拼写错误。猜猜它应该是main-panel。

其次，定义line-height:100px; css等效于包含文本的元素的div高度。在您的情况下，它应该是main-panel。这应该把文本推到中间。

的jsfiddle：

https://jsfiddle.net/sunalive/cx61z18p/1/

Answer 3

试试这段代码。我使用了浮动技术并添加了一些填充。

<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;
}

https://jsfiddle.net/pnL2xdne/

在</p> <div>中使用<p>和<img/>格式化问题

3 个答案: