Question

我无法将段落中的字词垂直对齐到左侧。我需要它们在左边的一条直线上，而不是我现在拥有的当前锯齿形方法。感谢您提供任何建议。

/* tablet sized screen*/

@media (min-width: 769px) {
  #columns {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
    flex-wrap: no-wrap;
  }
  .main-header h1 {
    justify-content: center;
  }
  .nav {
    flex-direction: row;
    max-width: 350px;
  }
  .nav li {
    border: none;
    background-color: #eff5f5;
    justify-content: center;
  }
  body {
    margin: 2em;
    padding: 0;
  }
  #header-info {
    position: relative;
  }
  .profile-image {
    position: absolute;
    right: 5em;
    height: 200px;
    width: 200px;
  }
  #first-paragraph {
    position: absolute;
    width: 400px;
    height: 300px;
    left: 10%;
  }
  #first-pargaraph p {
    text-align: left;
  }
  #header_info {
    max-height: 400px;
    background-color: #eff5f5;
    margin-top: 0;
  }

<div id="header_info">
  <header class="main-header">
    <h1>Tracy Excell</h1>
    <ul class="nav">
      <li><a id="home">Home</a>
      </li>
      <li><a href="#portfolio">Portfolio</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
    </ul>
  </header>

  <div id="wrapper">

    <img src="images/kiwiicon2.jpg" alt="Profile-picture" class="profile-image">

    <div id="first-paragraph">
      <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div>
  </div>

Answer 1

只需使用text-align: justify：

p {
  text-align: justify;
}

https://jsfiddle.net/21drwqeq/

Answer 2

我已编辑过您的代码，请仔细阅读：

http://jsbin.com/xayefe/edit?html,css,output

注意：我使用clearfix设置父级的高度，display: table;和display: table-cell;以便vertical-align: middle;可以使用。

Answer 3

你有没有试过你的CSS：

text-align: left;

这通常会将文本左对齐。我没有时间尝试你的代码。

通常，您不需要使用div包装段落标记，除非您要将动态内容加载到该div中。如果您需要对CSS中的段落执行某些操作，则只需将id或类应用于段落标记。

所以你的CSS将是

.paragraph
{
     text-align: left;
}

如何将段落div中的单词与左侧的垂直线对齐？

3 个答案: