浮起一些東西，並在它旁邊中心

也許這是一個非常愚蠢的問題，但我真的不知道。我想實現浮起一些東西，並在它旁邊中心

----------------------------------------- 
| TEXT LEFT CENTERED TEXT    | 
----------------------------------------- 

---------------------------------------------------------------------------------- 
| TEXT LEFT      CENTERED TEXT         | 
---------------------------------------------------------------------------------- 

------------------------------- 
| TEXT CENTERED TEXT  | 
| LEFT      | 
-------------------------------

所以我想要的東西浮到左，以及中心以下，但「文左」推了一下右邊的文本居中。我想兩件事情，無論是在小提琴

http://jsfiddle.net/MeGZ6/

<div style="text-align: center; width: 50%; background-color: red;"> 
<div style="float: left;">left text;</div> 
    centered text 
</div> 
<hr> 
    another attempt: 
<hr> 
<div style="width: 50%; background-color: yellow;"> 
    <div style="position: absolute; text-align: center;">centered text</div> 
text left 
</div>

第一個顯然也不行。第二，我不能對齊div中的文本，它會在其他文本上，而不是linebreak。

編輯：這就是我想要達到的目標：

http://jsfiddle.net/saLaP/

<table style="background-color: red;" width="100%"> 
    <tr> 
     <td width="20%" style="background-color: yellow;">left text</td> 
     <td width="60%" style="text-align: center;">centered text</td> 
     <td width="20%" style="background-color: green;"></td> 
    </tr> 
</table>

不需要綠柱，它只是一個「助手」。當然，沒有寬度的所有列，他們認爲是由於寬度其內容

來源

2014-02-07 John Smith

設置left:0;right:0;絕對定位的div

<div style="text-align: center; width: 50%; background-color: red;"> 
<div style="float: left;">left text;</div> 
    centered text 
</div> 
<hr> 
    another attempt: 
<hr> 
<div style="width: 50%; background-color: yellow;"> 
    <div style="position: absolute; text-align: center;left:0;right:0;">centered text</div> 
text left 
</div>

Fiddle Demo

來源

2014-02-07 23:48:59

是的，但是，如果你縮小面積，它仍然不會導致linebreak，文本越過其他。我不認爲它可以用「位置：絕對」方式解決 –

這裏是另一個解決方案，它可以工作爲您提供：

Fiddle Demo

您只需給容器格text-align: center並將剩下的其他div浮起來。由於容器是寬度的100％，並且文本是內聯的，因此它將自動居中。

HTML/CSS：

<div style="width: 100%;text-align: center; background-color: yellow;"> 
    <div style="float: left;">left text</div> 
    centered text 
</div>

來源

2014-02-07 23:56:24 badAdviceGuy

你可以做父DIV position: relative和中心DIV到position: absolute。 http://jsfiddle.net/MeGZ6/4/

HTML：

<div class="parent"> 
    <div class="left">left text</div> 
    <div class="center">centered text</div> 
</div>

CSS：

.parent{ 
    width: 50%; 
    position: relative; 
    float: left; 
    background: red; 
} 

.left{ 
    float: left; 
} 

.center{ 
    position: absolute; 
    width: 100%; 
    text-align: center; 
}

這裏的問題是，如果左格過長時，它將越過中心DIV。但是你可以給左邊的分區一個width，這樣它就不會穿過中心分區。

來源

2014-02-08 00:00:27 Chanckjh

好吧，這可能是解決方案，但是仍然沒有換行 –

你必須給左邊的div一個寬度 – Chanckjh

，如果它們是圖像？那麼，沒有寬度，並在同一行擴大？ –

我可能沒有給出足夠的說明。這就是我想要的：不需要

http://jsfiddle.net/saLaP/

<table style="background-color: red;" width="100%"> 
    <tr> 
     <td width="20%" style="background-color: yellow;">left text</td> 
     <td width="60%" style="text-align: center;">centered text</td> 
     <td width="20%" style="background-color: green;"></td> 
    </tr> 
</table>

綠柱，它只是一個「助手」。當然，沒有任何列的寬度，他們應該是寬度作爲他們的內容

來源

2014-02-08 11:26:23

浮起一些東西，並在它旁邊中心

回答

相關問題