定位圓對齊到中間，並用文本對齊

-1

http://adamginther.com/定位圓對齊到中間，並用文本對齊

我有三個問題：

我試圖讓它這樣下面「我也是100％真棒」的圈子在保持與頁面中心對齊的情況下對齊文本。
我希望表單上的標題「名稱，電子郵件和消息」與文本字段左對齊。
第一個圖像「dragonup」顯示在Safari上，但不顯示在任何其他瀏覽器上。

來源

2013-05-07 Adam Ginther

有了這種標記，很難提供幫助。擺脫'
'，併爲文本字段標籤使用語義標籤，例如'label'。另外，我不明白第1點的說明。 – Duopixel 2013-05-07 21:08:30

你需要以一種不會讓未來的讀者毫無價值的方式提問，一旦你有了答案。 – Flexo 2013-05-09 06:28:30

對於第一個，你在每個圓上有10％的左邊距。相反，你應該使用你最喜歡的方法將容器居中。我將它設置爲inline-block的和使用的text-align：

#bottomOpener { 
    display: inline-block; 
    text-align: center; 
    width: 100%; 
}

我然後取出保證金，留在每一個圈子，並把它改爲間距相等：

#developer { 
    margin: 1em 5%; 
}

你應該使用班級而不是爲每個圈子設置相同的樣式。

2：您沒有爲表單標籤添加標籤元素。添加此並刪除BR。並添加一個ID，以便它引用文本字段：

<label for="name">Name:</label> 
<input type="text" name="name" id="name"/>

對每個字段執行相同操作。然後，你需要樣式的標籤，使他們的左對齊和字段下清除：

label { 
    text-align: left; 
    display: block; 
}

接下來，您必須使用自己喜歡的方法來居中形式。我的寬度設置爲相同的字段和使用的自動保證金：

form { 
    width: 250px; 
    margin: 0 auto; 
}

3：它看起來像你的形象被破壞。 Opera認爲它是一個矢量，Firefox說它有錯誤。嘗試通過導出它來重新保存或重新創建圖像。

來源

2013-05-07 21:39:57

首先，我會重寫標記。你在那裏有表現性的標記和過於具體的CSS類。另外，我會在語義上對內容進行分組。設計師，開發人員和用戶體驗項目應根據其內容而非其演示進行分組。然後你可以使用CSS來定位屏幕上的元素。

喜歡的東西：

<ul> 
    <li class="designer"> 
     <ul class="points"> 
      <li>HTML</li> 
      <li>CSS</li> 
      <li>JavaScript & jQuery</li> 
     </ul> 
     <p>50% <span>Developer</span> 
     </p> 
    </li> 
    <li class="developer"> 
    </li> 
    <li class="uxdesigner"> 
    </li> 
</ul>

，...等

在你的CSS，那麼你可以浮動每<li>（100％的寬度），並應用圈子效應嵌套<ul>的。或者，您可以使用display: inline-block並將文本居中放置在<ul>中，以便它們始終具有相同的對齊方式。

來源

2013-05-07 21:14:38 aaronburrows

感謝你們，我在休息了一個月後剛回到HTML/CSS/JS，所以這是我計劃在所有其他事情完成時提高的標記，但這有助於。 – 2013-05-08 06:30:26

定位圓對齊到中間，並用文本對齊

回答

相關問題