html - 如何对齐文本垂直 CSS

Question

我正在编写一个简单的投资组合。我是软件开发人员，所以我没有足够的 CSS 知识。我想在一行中垂直对齐文本。下面是我想要做的示例。

Some Text 1
Some Text 2
Some Text 3

这就是我目前实际拥有的。

 Some Text 1
    Some Text 2
   Some Text 3

As you can see, I want to remove that empty space (blanko). I use <p> tag (paragraph) that I styled in CSS.

p { 
    display: inline;
    color: #888;
    position: relative;
    text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
    text-align: center;
    padding: 8px 30px;
    font-family: helvetica, arial, sans-serif;
    display: inline-block;
    vertical-align:middle;
}

如果你还是不明白这个问题，我在下面贴了一张图片。第一个面板显示我目前拥有的东西，第二个面板显示我想要制作的东西。请注意，第二个面板是设计好的。

Answer 1

看来是您的图像尺寸导致了偏移。如果你能让所有这些宽度相同，它应该排成一行。

我能想到的两个选项是:

1. 快速而肮脏的方法 - 使用表格。如果您要从事设计工作，这通常会让您被淘汰。

2. 使用两个 div，设置它们的宽度，并在第一个中使用类似于无序列表的东西 - 这将用于您的图像以及图像右侧的任何内容。在第二个中，您放置了文本。这些列你想设置 position: relative, float: left, display: inline-block

这将实现的是您的图像将位于它们自己的“盒子”中并与该盒子对齐。您的文本将位于其自己的“框”中并与该框对齐。盒子的边缘不会重叠，因此您不必担心各个元素之间的可变宽度。带有 border: 0 的列，会有整体的视觉感觉。