css一个框中放图片和文字

在网页设计中，我们经常需要在一个框里同时放置图片和文字。这时候，就需要使用CSS来实现。下面是一个例子：

HTML代码：
<div class="Box">
  <img src="图片地址" alt="图片描述">
  <p>这里是文字描述</p>
</div>

CSS代码：
.Box {
  display: flex;   /*设置flex布局*/
  align-items: center;  /*垂直居中*/
  justify-content: center; /*水平居中*/
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}
img {
  width: 50%;  /*设置图片宽度*/
  height: 50%;
  margin-right: 20px;  /*设置图片与文本之间的间距*/
}
p {
  flex: 1;  /*自适应宽度*/
}

在这个例子中，我们采用了flex布局来实现图片和文字的对齐和居中。首先，设置.Box的display属性为flex，align-items属性为center，justify-content属性为center，这样就使得图片和文本都在水平和垂直方向上居中了。

然后，我们对图片和文本分别进行样式设置。设置图片的宽度和高度为50%，同时设置margin-right属性为20px，这样就使得图片与文本之间有一定的间距了。接着设置文本的flex属性为1，这样就可以自适应宽度了。

这样，一个包含图片和文字的框就完成了。实际应用中，可以根据具体的需要进行样式的调整和修改。