Question

我尝试将图像对齐在页面中央，同时还将一些文本对齐到图像的右侧。我将如何在css或html中执行此操作？

以下是我目前的尝试：

＆＃13;

.center-img {
    display: inline-block;
    margin: 0 auto;
}

.center-txt {
    display: inline-block;
}

＆＃13;

<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
		<h1>Home</h1>
</div>

＆＃13;

此时图像未居中，文字未与图像垂直居中

以下是我最终希望看到的内容的直观表示：

Answer 1

解决方案1：

您可以使用 div 将图片和文字换行并使用 text-align: center 以及 {{1} }

＆＃13;
＆＃13;
vertical-align: middle
＆＃13;
.center-img, .center-txt { display: inline-block; vertical-align: middle; } #wrapper { text-align: center; border: 1px solid red; }
＆＃13;
＆＃13;
＆＃13;

解决方案2：

或者，您可以使用 <div id="wrapper"> <img src="http://placehold.it/100x100" class="center-img" /> <div class="center-txt"> <h1>Home</h1> </div> </div> 将图片和文字换行并使用 div 。使用 flexbox 水平居中元素， justify-content 将它们垂直对齐。

＆＃13;
＆＃13;
align-items: center
＆＃13;
.center-img, .center-txt { display: inline-block; } #wrapper { display: flex; justify-content: center; align-items: center; border: 1px solid red; }
＆＃13;
＆＃13;
＆＃13;

现在将上面的 <div id="wrapper"> <img src="http://placehold.it/100x100" class="center-img" /> <div class="center-txt"> <h1>Home</h1> </div> </div> 置于可以使用的屏幕中间位置：

wrapper

示例：

＆＃13;
＆＃13;
#wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
＆＃13;
.center-img, .center-txt { display: inline-block; } #wrapper { display: flex; justify-content: center; align-items: center; border: 1px solid red; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
＆＃13;
＆＃13;
＆＃13;

Answer 2

我们有一个包装器 - div。 Div的视口宽度和高度均为100％。我给出div pics的背景和变暗的线性渐变。 Div是一个flex-block。内部内容与justify-content（水平）和align-items（垂直）对齐。全部。

ps：抱歉，抱歉。不是全部。我们和这位女士一起去喝啤酒。：）））

* {
  padding: 0;
  margin: 0;
}
div {
  background-image: linear-gradient(rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 100%), url("http://beerhold.it/600/400");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
img {
  margin-right: 1em;
}

<div class="wrapper">
  <img src="http://beerhold.it/100/100">
  <p>Lorem ipsum</p>
</div>

Answer 3

<div class="container">
    <img src="img.jpg"/>
    <div class="text">
        text
    </div>
</div>

.container{
    text-align:center;
}

img, .text{
    display:inline-block;
}

Answer 4

使图像居中使用

 img.center{
display:block;
margin:0 auto;
}

Answer 5

将图像和文本包装在容器中并向其添加display:flex。

然后，要使用align-items: center;和justify-content: center;

来居中

见下面的代码段。让我知道它是否适合你

有关如何垂直居中的详细信息，请参阅此处 - ＆gt; Vertical Centering with Flexbox

＆＃13;

.center-img {
    display: inline-block;
    margin: 0 auto;
}

.center-txt {
    display: inline-block;
}
.container { 
  width:500px;
  height:500px;
  border:2px solid red;
  display: flex;
  align-items: center;
  justify-content: center;padding:0 15px;}

＆＃13;

<div class="container">


<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
		<h1>Home</h1>
</div>
</div>

＆＃13;

Answer 6

只需将vertical-align: middle;添加到课程center-img

即可

vertical-align属性设置元素的垂直对齐方式。使用中间位置将其置于父元素的中间

＆＃13;

.center-img {
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
}

.center-txt {
    display: inline-block;

}

＆＃13;

<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
		<h1>Home</h1>
</div>

＆＃13;

Answer 7

使用此 -

<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Right Vertical aligned text</span>
</div>

Refer to this link.

Answer 8

像这样：https://jsfiddle.net/jn4rktaa/

HTML：

<div class="outside">
   <div class="inside">
      <img src='/img/file.jpg' class="img" />
      Test Text
   </div>
</div>

CSS：

.outside {
  width: 800px;
  height: 600px;
  border: 1px solid red;
  position: relative;
}

.inside {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  margin: 0 auto;
  top: calc(50% - 100px); /* THE VALUE (100PX) SHOULD BE HALF OF YOUR ELEMENT'S HEIGHT */
}

.img {
  float: left;
}

如何在将文本对齐图像右侧的同时居中图像？

8 个答案: