Question

我想让图像居中并在其左侧显示文字。我尝试过的所有内容都是将文字放在图像下方，图像上方，或者在我输入的内容中将图像更多地推向右侧。谁能帮我？我是html和css的新手。

＆＃13;

body {
  margin: 0;
  padding: 0;
}
h1 {
  text-align: center;
  border: solid;
  background-color: #FF0000;
}
span {
  display: inline-block;
  border: dashed blue;
  color: #ff0000;
  float: left;
}
.mainPicture {
  display: block;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href=main.css>
</head>

<body>
  <h1>Welcome</h1>
  <div>
    <span>  My name is asd asd. I am currently attending  </span>
    <img src="onlinePicture.jpg" alt="Picture of Me" class="mainPicture">
  </div>
</body>

</html>

＆＃13;

Answer 1

使用CSS定位可以帮助你。

将div设置为position: relative;，然后将图像设置为position: absolute;。然后偏移图像left: 50%;并通过用margin-left: -15%;删除图像的一半来计算图像的宽度。

示例：

body {
  margin: 0;
  padding: 0;
}
h1 {
  text-align: center;
  border: solid;
  background-color: #FF0000;
}
div {
  position: relative;
}
span {
  display: inline-block;
  border: dashed blue;
  color: #ff0000;
  float: left;
}
.mainPicture {
  display: block;
  width: 30%;
  position: absolute;
  left: 50%;
  margin-left: -15%;
}

<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href=main.css>
</head>

<body>
  <h1>Welcome</h1>
  <div>
    <span>  My name is asd asd. I am currently attending  </span>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Picture of Me" class="mainPicture">
  </div>
</body>

</html>

Answer 2

＆＃13;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    text-align: center;
    border: solid;
    background-color: #FF0000;
}
div {
    /*text-align: center;*/
    font-size: 0;
    margin: 10px auto;
}
div > span {
    display: inline-block;
    vertical-align: top;
    border: 1px dashed blue;
    color: #ff0000;
    font-size: 16px;
    width: 35%;
    text-align: center;
}
div > span:nth-child(2) {
    width: 30%;
    border: none;
}
div > span:nth-child(2) img{    
     background: #ccc;
     width: 100%;    
}

＆＃13;

<h1>Welcome</h1>
<div> 
<span>  My name is asd asd. I am currently attending</span>
<span><img src="http://mc-fc.net/wp-content/uploads/2012/11/124124124_mcfc.gif" alt="Picture of Me" class="mainPicture" /></span> 
</div>

＆＃13;

居中图像和文本向左推图像

2 个答案: