2017-06-14 10 views
0

文字列の中心をコンテナの幅の70%のピクセルになるように文字列を配置したいと思います。その文字列とは別に、コンテナ内の他のすべてのテキスト行は通常(左に)整列されています。 たとえば、コンテナの幅が300ピクセルの場合、テキストの中心はピクセル210になります。テキストの中心がコンテナの幅の70%になるようにテキスト行を配置します

これを達成する最も良い方法は何ですか。 もっと普通の(左の)整列されたテキストと線を共有する場合、それを行う方法はありますか?

更新日: 私の質問は不明です。答えに時間を割いたすべての人に応用する。 明確にするために、コンテナには多くの行のテキストが含まれており、すべて通常は(左揃えに)配置されています。私は配置したい文字列が1つしかないので、その中心はコンテナの幅の70%です。

+3

あなたはパディングなどの何かを試しましたか? –

答えて

0

することができます偽のコンテナに応じて

またがるあなたのコンテナや位置の内側に内側のスパンでテキストを配置することによって、このアライメント:内部スパンで

position: relative; 

position: absolute; 
    left: 70%; 
    transform: translate(-50%, 0); 

here

0

これはいかがですか?

#thediv { 
 
    background-color: lightgray; 
 
    width: 70%; 
 
    height: 100px; 
 
} 
 

 
.container { 
 
    background-color: gray; 
 
    height: 200px; 
 
}
<div class="container"> 
 
    <center> 
 
    <div id="thediv"> 
 
    text text text text text text text text 
 
    text text text text text text text text 
 
    text text text text text text text text 
 
    text text text text text text text text 
 
    </div> 
 
    </center> 
 
</div>

1

これが役立つかもしれません。 ::beforeの幅を適宜変更してください。コンテナーが親の幅を持つようにします。

<!-- HTML --> 
<div class="container"> 
    Text 
</div> 

// CSS 
.container { 
    text-align: center; 
} 
.container::before { 
    content: ''; 
    width: 30%; 
    display: inline-block; 
} 

Codepen

この情報がお役に立てば幸いです。

ありがとうございます!

関連する問題