css对齐问题

Question

按钮怎么跟文字左对齐呢，文字要跟图片一样居中而且内容多少不定

Answer 1

HTML

<div id="wrapper">
  <img id="img" src="http://7xpqmf.com1.z0.glb.clouddn.com/uploads/2016/576938072c671b2b130d1c26/0/10.jpg?imageView/2/w/150" />
  <div id="inside">
    <p>何酌与空对明河三丝回花一时寞如。醒美水惟酒贵十有耳河欢还河如三。月陈意丝河河千牛酒暮堂时百陈牛。</p>
    <button>按钮</button>
  </div>
</div>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center
}
#wrapper {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

实例：https://jsfiddle.net/np8brr5z/1/

Answer 2

图片居中 设置display:block; margin-left:auto;margin-right:auto;

文字居中 用p元素包裹起来 再设置： text-align: center;

按钮左对齐 默认就是左对齐

Answer 3

用个div，三个元素在div里面用margin

Answer 4

例子

<div class="info">
  <img src="https://wallpaperscraft.com/image/surface_drops_texture_background_lilac_96071_602x339.jpg" alt="" class="image" />
  <div class="description">這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字這是一堆文字</div>
  <div class="action">
      <a href="#" class="btn">進入</a>
  </div>
</div>

* {
  padding: 0;
  margin: 0;
}

body {
  padding: 30px;
}

a {
  color: #000;
  text-decoration: none;
}

.btn {
  display: inline-block;
  color: #333;
  padding: 10px 15px;
  background: #f2f2f2;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.2);
}

.info {
  width: 60%;
  display: flex;
  flex-direction: column;
}

.info > .image {
  width: 80%;
  margin: 0 auto;
  height: 200px;
  background: #333;
}

.info > .description {
  padding: 10px 0 10px 0;
}