定位圆对齐到中间，并用文本对齐

-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

定位圆对齐到中间，并用文本对齐

回答

相关问题