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 をスパンに変更してください。これにより、最後に余分な空白がないように単語がラップされます。

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

への変更：

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

それが役立つことを願っています!

于 2013-04-25T17:13:05.393 に答える