Question

This是我整天编码的网站，但我无法将徽标右侧的文字放在徽标的中心。

任何人都可以提供帮助，我尝试寻找答案，但没有找到答案。？

这是CSS

/*
    Name: SunMissive
    Date: 13, 07, 2013
    Discription: Responsive Html5 And css3 site
    Version: 1.0
    Auther: David Kvindesland
    Auther URL: http://www.tvitre.org
*/

body {
    background-image: url("http://i.imgur.com/5exXQso.png");
    color: #000305;
    font-size: 87.5%; /*base font size is 14px */
    font-family: Calibri, Arial, 'lucida sans unicode';
    line-height: 1.5;
    text-align: left;
}

@font-face {
    font-family: 'pacificoregular';
    src: url('pacificothingk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

a {
    text-decoration: none;
}

a:link, a:visited {

}

a:hover, a:active{

}

.body {
    margin: 0 auto;
    width: 70%;
    clear: both;    
}

.mainheader img {
    width: auto;
    height: 30%;
    vertical-align: middle;
    margin: 2% 0%;
}

.mainheader span {
    text-align;
    font-size: 500%; 
    font-style: Arial;
    font-weight: bold;
    font-family: pacificoregular;
}

.mainheader nav {
    background-color: #9C9C9C;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainheader nav ul {
    list-style: none;
    margin: 0 auto;

}

.mainheader nav ul li {
    float: left;
    display: inline;
}

.mainheader nav a:link, .mainheader nav a:visited {
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
    transition: 0.5s ease-in-out;
    background-color: #4F9BE8;
    text-shadow: none;
}

.mainheader nav li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainContent {
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.content: {
    width: 70%;
    float: left;
}

.topcontent {
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin: 2%;
}

.bottomcontent {
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin: 2%;

}

.mainfooter {
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2%;
    text-align: center

}

HTML

<!DOCTYPE html>
<html lang="NO">

<head>
    <title>SunMissive</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="style.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body class="body">

    <header class="mainheader">
        <img src="http://i.imgur.com/M8lrFtm.gif" alt="tvitre logo"/>
        <span>SunMissive.no</span>

        <nav><ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Why</a></li>
            <li><a href="#">Contact</a></li>
        </nav></ul>
    </header>

    <div class="mainContent">
        <div class="content">
            <article class="topcontent">
                <header>
                    <h2><a href="#" title="first post">Viderutviklet Design</a></h2>
                </header>

                <footer>
                    <p class="post-info">Dette inlegget er skrevet av David 12.07.2013</p>
                </footer>

                <content>
                    <p>
                        Denne siden er bare laget som demo, den er av mitt eget arbeid og du kan derfor ikke bruke den videre. takk. Aliquam congue faucibus. Donec non mi eu risus vehicula accumsan sed nec nunc. Pellentesque malesuada tellus in consectetur laoreet. Donec volutpat adipiscing blandit. Praesent in vestibulum turpis. Praesent pulvinar semper nulla, a imperdiet ligula auctor quis. Fusce tempor sodales dignissim. Aenean lobortis sapien blandit blandit laoreet. Quisque et purus iaculis massa tempus imperdiet. Aliquam accumsan tristique ipsum, id euismod elit convallis ut. Nullam lobortis elit lorem.
                    </p>

                    <p>
                        c sed viverra orci. Suspendisse sed diam quam. Praesent in lacus nec enim euismod posuere eget sit amet orci. In sed viverra turpis, at sagittis sapien. Fusce aliquam turpis et sapien tristique commodo id in arcu. Praesent feugiat lectus ligula, quis condimentum felis pharetra vel. Fusce rutrum commodo gravida. Praesent vel consectetur dolor. Mauris eu tempor nisi. Vestibulum id eros vel est vulputate interdum. Quisque a ipsum malesuada, mollis metus id, lacinia odio. Suspendisse egestas felis non nisi faucibus, sit amet euismod lorem congue. Pellentesque tempor odio ac dapibus vehicula.
                    </p>
                </content>
            </article>

            <article class="bottomcontent">
                <header>
                    <h2><a href="#" title="second post">Her kommer det mer!</a></h2>
                </header>

                <footer>
                    <p class="post-info">Dette inlegget er skrevet av David 10.07.2013</p>
                </footer>

                <content>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam congue faucibus. Donec non mi eu risus vehicula accumsan sed nec nunc. Pellentesque malesuada tellus in consectetur laoreet. Donec volutpat adipiscing blandit. Praesent in vestibulum turpis. Praesent pulvinar semper nulla, a imperdiet ligula auctor quis. Fusce tempor sodales dignissim. Aenean lobortis sapien blandit blandit laoreet. Quisque et purus iaculis massa tempus imperdiet. Aliquam accumsan tristique ipsum, id euismod elit convallis ut. Nullam lobortis elit lorem.
                    </p>
        </div>
    </div>

    <footer class="mainfooter">
        <p>&copy; David Kvindesland - 2013 - webmaster@tvitre.org</p>
    </footer>

</body>

Answer 1

您需要以下样式才能使其正常工作。它们目前是内联的，但将它们放在CSS中应该可以解决问题：

    <img src="http://i.imgur.com/M8lrFtm.gif" alt="tvitre logo" style="float:left;">
    <span style="display: block;position: relative;top: 45px;">SunMissive.no</span>
    <div style="clear:both;"></div>

或者，这是垂直居中文本的良好资源。 Link

中心文本右侧从标题中的图像

1 个答案: