如何对齐文本垂直CSS

Question

I'm coding a simple portfolio. I'm software developer so I don't have enough knowledge in CSS. I want to align text vertical in a row. Example of what I want to do is bellow.

Some Text 1
Some Text 2
Some Text 3

This is what I actually have at the moment.

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;
}

If you still don't understand the question, I posted a picture bellow. The first panel display what I have currently, and the second one, what I want to make. Please note that the second panel is designed.

Answer 1

It appears that your image sizes are causing the offsets. If you can get all of those to be the same width, it should line up.

The two options I can think of off the top of my head are:

1. The quick and dirty - use a table. If you're going for a design job, this will usually get you passed over though.

2. Use two divs, set their widths, and in the first one use something similar to an unordered list - this will be for your images and whatever is to the right of the image. In the second one you put the text. These columns you would want to set position: relative, float: left, display: inline-block

What this will accomplish is that your images will be in their own 'box' and aligned to that box. And your text will be in its own 'box' and aligned to that box. The boxes edges won't overlap, so you won't have to worry about variable widths among the individual items. With a border: 0 on the columns, it will have the visual feel of being altogether.

Answer 2

i think this is what you need :

css

p {
   vertical-align:middle;
}

here the description of the vertical align on w3schools.com http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Answer 3

即使它不是最漂亮的，也可以将其TAB插入。