0

それで、

一連のフローティング要素をページの中央に配置しようとすると問題が発生します。上部にいくつかのフローティング要素を使用するページで作業しています。ページタイトル、画像、ページタイトルの別の単語の順で、すべてが隣り合ってフローティングになっています。

それを達成するために、私は以下を使用しています：

<div class="bodyheaddiv"><p class="bodyheadtext">Contact Us</p><img class="bodyhead"     src="http://lrgi.org/wp-content/uploads/2012/10/Contact_icon_1.png" alt="" /><p     class="bodyheadtext">Contáctenos</p></div>​

CSSの場合：

.bodyheaddiv {
height: 51px;
width: 500px;
margin-left: auto;
margin-right: auto;
}

.bodyhead {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;
}

.bodyheadtext {
line-height: 30px;
display: inline;
clear: none;
float: left;
margin-top: 0px;
font-size: 18px;
position: relative;
}​

現在の結果は次のとおりです。 ここに画像の説明を入力してください

ページのタイトルと画像が列の中央に配置されていない場合。しかし、私が達成しようとしているのはこれです：

ここに画像の説明を入力してください

これらの要素をページの中央に配置する方法を理解するための助けをいただければ幸いです。

-マルカ

4

2 に答える 2

0

これでうまくいくはずです：

デモ

<div>
    <p><span>Contact Us</span><span>Contáctenos</span></p>
</div>​

CSS の場合:

div {
    height: 70px;
    width: 500px;
    0 auto;
    background-image: url('http://lrgi.org/wp-content/uploads/2012/10/Contact_icon_1.png');
    background-position: top center;
    background-repeat: no-repeat;
}

div p {
    text-align: center;
    height: 70px;
    line-height: 70px;
}

div p span {
    margin: 0 60px;
}
于 2012-10-22T13:03:52.827 に答える
-1

これがあなたの答えです

<div class="bodyheaddiv">
<table align="center">
<tr>
<td>
<p class="bodyheadtext">Contact Us</p></td>
<td><img class="bodyhead"     src="http://lrgi.org/wp-content/uploads/2012/10/Contact_icon_1.png" alt="" /></td>
<td><p class="bodyheadtext">Contáctenos</p></td>
</tr>
</table>
</div>
于 2012-10-22T13:01:11.533 に答える