Question

我试图在文本旁边完美地对齐一个段落，但我很挣扎，有人可以帮忙吗？这就是我所拥有的：

#aboutme {
  padding: 50px;
}

#aboutme img {
  border-radius: 50%;
  width: 150px;
  vertical-align: middle;
}

#aboutme p {
  font-size: 16px;
  display: table-cell;
  color: #212529;
}

.intro_link {
  text-decoration: none;
  color: #4a69bd;
}

.intro_link:hover {
  color: red;
}

<section id="aboutme">
  <div class="container">
    <img src="./img/face.png">
    <p>Welcome to my personal website! In here, you will find out everything about me. You can scroll down to discover more about my portfolio, my weekly activities or ways to contact me. Before doing so, I shall briefly introduce myself! I am a 20 year
      old student studying at Concordia University in Montreal. Currently, I am in my 2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience has been wonderful. I meet great people that share similar interests, my
      network is growing day-by-day and I learn things that interest me. The ultimate goal right now is to graduate and this website will be used to explore everything I learn as I go. For my school assignments and personal projects, you can find them
      in the <a href="#" class="intro_link">portfolio</a> section. If you are ever interested in checking out my other social etworks (GitHub, LinkedIn, etc...) or to contact me, you can go to the <a href="#" class="intro_link">contacts</a> section.
    </p>
  </div>
</section>

我想很好地调整段落和图像以使其美观和中心，但我正在努力理解属性，我开始学习HTML＆amp;昨天的CSS

Answer 1

＆＃13;

<div *ngFor="let obj of objs;">
  <ng-container *ngFor="let child of obj.childObject;>
    <span>{{ child.name }}</span>
  </ng-container>
<div/>

＆＃13;

#aboutme{
  padding: 50px;
}

#aboutme img{
  border-radius: 50%;
  width: 150px;
  vertical-align: middle;
  float:left;
  padding: 0px 10px 10px 0px;
}

/*#aboutme p{
 font-size: 16px;
 display: table-cell;
 color: #212529;
}*/

.intro_link{
  text-decoration: none;
  color: #4a69bd;
 }

 .intro_link:hover{
    color: red;
 }

＆＃13;

Answer 2

您可以使用flex来实现此目标

将display: flex设为.container
在align-items: start中使用.container，以便image不会拉伸
将margin-right添加到#aboutme img以获取image和paragraph之间的间距 #aboutme{ padding: 50px; } #aboutme img{ border-radius: 50%; width: 150px; vertical-align: middle; margin-right: 10px; } #aboutme p{ font-size: 16px; display: table-cell; color: #212529; } .intro_link{ text-decoration: none; color: #4a69bd; } .intro_link:hover{ color: red; } .container { display: flex; align-items: start; }

<section id="aboutme">
  <div class="container">
    <img src="http://via.placeholder.com/500x500">
    <p>Welcome to my personal website! In here, you will find out everything about me. You can scroll down to discover more about my portfolio,
     my weekly activities or ways to contact me. Before doing so, I shall briefly introduce myself! I am a 20 year old student studying at Concordia University in Montreal. Currently, I am in my
      2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience
      has been wonderful. I meet great people that share similar interests, my network is growing day-by-day
      and I learn things that interest me. The ultimate goal right now is to graduate and this website will
      be used to explore everything I learn as I go. For my school assignments and personal projects, you can find
      them in the <a href="#" class = "intro_link">portfolio</a> section. If you are ever interested in checking out my other social
      etworks (GitHub, LinkedIn, etc...) or to contact me, you can go to the <a href="#" class = "intro_link">contacts</a> section.
    </p>
  </div>
</section>

cmake_minimum_required(VERSION 3.10)
project(test_pro)
set(CMAKE_CXX_STANDARD 11)
add_library(test_pro SHARED library.cpp library.h)

对齐段落旁边的图像

2 个答案: