1

下の画像のように、点線の境界線の間にテキストを垂直方向と水平方向の中央に配置する必要があります。

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

私はこれを達成しようとする非常に単純なフィドルを持っています。

添付のスクリーンショットとして表示されるようにCSSを修正するにはどうすればよいですか？

4

3 に答える 3

2

divをテキストでフローティングして、境界線上に配置するためのマージンを与えることができます。

HTML

<div id="dotted">
    <div id="text">Text goes here.</div>
</div>

CSS

#dotted {
    border-top:1px dotted #000;
    padding:10px;
}

#text {
    float:left;
    padding:0 10px 0 10px;
    margin:-20px 0 0 30px;
    background:#fff;
}

JSフィドル： http： //jsfiddle.net/aBDjY/2/

于 2012-07-25T14:13:24.240 に答える
0

これを行うには、CSSポジショニングを使用できます...

これをチェックしてください：

私のフィドル（水平）

私のフィドル（垂直）

于 2012-07-25T14:25:22.023 に答える
0

http://jsfiddle.net/lukas2012/aHNh6/5/

pseudeoelement（：after）を操作することもできます

と一緒に使用text-align: centerしますdisplay: inline-block

このように、それはどんなテキストでも機能し、あなたのレイアウトは相対的な要素を動かしてイライラすることはありません

背景色を動的に保つには、background-color: inherit;

.wrap{
    position: relative;
    margin: 100px auto;
    width: 500px;
    text-align: center;
    background: #ff0;

}
.wrap:after {
    content: '';
    border-top:1px dotted #000;
    position: absolute;
    left: 0;
    z-index: 0;
    top: 50%;
    width: 100%;
    height: 1px;

}

.text {
    background-color: inherit;
    position: relative;
    margin:0  auto;
    display: inline-block;
    z-index: 1;
}
​
于 2012-07-25T14:56:57.780 に答える