由父母居中

时间：2013-09-15 19:34:05

标签： html css

我正在新的内部网页面上工作。

目前我有类似的东西：

enter image description here

我希望：

enter image description here

有没有办法将我的文本放在父母（图片）右边？

这是我的代码，但它不起作用：

<body style="background-color:#FFCC66">
<br/><a href="/" title="Przejdź do strony głównej">
         <img style="display:block;margin-left:auto;margin-right:auto"
              src="/logointra.png" alt="Logo Intranetu" /></a>
<br/>
<span style="display:block; position:relative; text-align:right">
     I wanna be centered to right by my parent - image</span>

5 个答案:

答案 0 :(得分：2)

http://jsfiddle.net/xrJ2z/5/

HTML：

<div id="container">
    <img src="intranet.jpg">
    <div>i'm placed right</div>
</div>

CSS：

#container {
    width:200px;
    margin:auto auto; /*set div in center*/
    background-color:red;
    text-align:right;
}
img {
    display:block; /*Marc Audet Tip*//*remove unnecessary space between img and text div*/
}

P.S。

<div> is like <span style="display:block">

答案 1 :(得分：2)

如果您不想添加包装元素，则需要执行以下操作：

<a href="/" title="Przejd? do strony g?ównej">
    <img src="http://placehold.it/400x100" alt="Logo Intranetu" />
</a>
<span>I wanna be centered to right by my parent - image</span>

和CSS：

body {
    background-color: #FC6;
}
img {
    display: block;
    margin: 0 auto;
}
span {
    display: block;
    width: 400px;
    margin: 0 auto;
    text-align: right;
}

请参阅http://jsfiddle.net/audetwebdesign/xdkGV/

上的演示

由于图片具有固有宽度，margin: 0 auto会使图像居于中心位置。

请注意，图像左侧和右侧的空间也是可点击的。

显示为块元素的span需要具有与图像匹配的宽度。 在这种情况下，margin: 0 auto居中工作和text-align: right强制文字与图片的右边缘匹配。

答案 2 :(得分：1)

这是你想要的？的 Fiddle

只需添加一个“容器”元素，该元素包含img和span元素，然后float内部元素包含在左边。

<强> HTML ：

<div class="container">
<a href="/" title="Przejdź do strony głównej">
    <img src="/logointra.png" alt="Logo Intranetu" />
</a>
<span style="display:block; position:relative; text-align:right">I wanna be centered to right by my parent - image</span>
</div>

<强> CSS ：

body {
    background-color: #FC6;
    text-align: center;
}
.container {
    display: inline-block;
}

.container > * {
    float: left;
}

答案 3 :(得分：0)

将图像换行并跨越<div>元素，并将跨度的css float属性设置为右。

<div><a href="/" title="Przejdź do strony głównej">
     <img style="display:block;margin-left:auto;margin-right:auto"
          src="/logointra.png" alt="Logo Intranetu" /></a>
<br/>
<span style="display:block; position:relative; text-align:right; float:right;">
 I wanna be centered to right by my parent - image</span></div>

答案 4 :(得分：0)

试试这个：

<body style="background-color:#FFCC66"><br/><div style="margin-left:auto;margin-right:auto"><a href="/" title="Przejdź do strony głównej"><img src="/logointra.png" alt="Logo Intranetu" /></a>
<br/><span style="text-align:right">I wanna be centered to right by my parent - image</span></div>
相关问题
最新问题