0

我目前在一个盒子里有一个盒子,但它没有以文本为中心。我想将框围绕文本居中,以使框不会超出空白区域:

http://jsfiddle.net/infoed/nvVBU/(css在jdfiddle中):

<DOCTYPE! html>
<html>
<head>
    <title>fumblr.</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body>
    <div id="navbar">
        <ul>
             <li><img src="img/toplogo.png"></li>
             <li> <a> Fumblr </a> </li>
        </ul>
    </div>

<div id="content">
    <div class="box">
            <img src="img/heart.svg" height="18" width="18" />
            <div class="userid">DogBountyHunter27</div>
            <div class="headline">Been 10 Days off bread. Want to die</div>
            <p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
        </div>

        <div class="box">
            <img src="img/heart.svg" height="18" width="18"  />
            <div class="userid">Vader2307</div>
            <div class="headline">Hilarious Link of Bill Gates Jumping over a chair</div>
            <p>Type an address into your phone, and up will pop a step-by-step route from where you are to where you want to be. This is, in its way, magic. But it's magic that has, at this point, been rubbed and polished into a simple fact of life. The ease with...  </p>
        </div>

        <div class="box">
            <img src="img/heart.svg" height="18" width="18" />
            <div class="userid">ShaqAttack</div>
            <div class="headline">Is Insanity Wolf bad for the meme community?</div>
            <p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
        </div>

        <div class="box">
            <img src="img/heart.svg" height="18" width="18" />
            <div class="userid">Jimmy Two Times</div>
            <div class="headline">Fax machines making a comeback in Williamsburg</div>
            <p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
        </div>

        <div class="box">
            <img src="img/heart.svg" height="18" width="18" />
            <div class="userid">SmoothieFanatic</div>
            <div class="headline">Fifth Grader Expelled for bringing Siracha to school</div>
            <p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
        </div>     
    </div>
</body>
</html>
4

1 回答 1

0

我假设您正在谈论“标题”div。如果是这样,只需将 div 更改为 span。这将包装单词,最后没有多余的空格。

<div class="headline">HEADLINE HERE</div>

改成:

<span class="headline">HEADLINE HERE</span>

希望有帮助!

于 2013-04-25T17:13:05.393 回答