0

我正在我的新 Intranet 页面上工作。

目前我有类似的东西：

在此处输入图像描述

我希望有 ：

在此处输入图像描述

有没有办法让我的文本在它的父级（图像）的右边居中？

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

<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>
4

5 回答 5

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*/
}

附言

<div> is like <span style="display:block">
于 2013-09-15T19:45:25.373 回答
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强制文本匹配图像的右边缘。

于 2013-09-15T20:02:24.917 回答
1

这就是你想要的？小提琴。

只需添加一个包含and元素的“容器”元素，然后将内部元素添加到左侧。imgspanfloat

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;
}
于 2013-09-15T19:36:19.733 回答
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>
于 2013-09-15T19:51:52.113 回答
0

将图像和 span 包装在一个<div>元素中，并将 span 的 css float 属性设置为 right。

<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>
于 2013-09-15T19:42:09.573 回答