Question

我有一个div响应。我喜欢它在屏幕变化时的工作方式：它像img一样工作，它在宽度和高度之间保持一定的比例。问题是里面的文字。我如何将文本居中，水平和垂直？同时，如果文本与div的限制之间存在一定距离，那将是很好的。请记住：在响应环境中的所有内容。

检查并播放：http://jsfiddle.net/xkr6v9yh/1/

HTML：

<div id="wrapper">
<div id="small">some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, </div>
</div>

CSS：

#wrapper {
    position: relative;
    margin:0 auto;
}


#small {
    width: 100%;
    padding-bottom: 50%;/* 50% of width of container */

    color: white;
    text-align: center;

    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background: blue;
}

Answer 1

应用table和table-cell属性以对齐中间的文本。

＆＃13;

#wrapper {
	position: relative;
	margin:0 auto;
	background: red;
    display: table;
    width: 100%;
    height: 250px;
}


#small {
	width: 100%;
  	color: white;
  	text-align: center;
    display: table-cell;
    vertical-align: middle;
  	background: blue;
}

＆＃13;

<div id="wrapper">
	<div id="small">some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, </div>
</div>

＆＃13;

Answer 2

作为其他答案，但设定的比率为：codepen to play with

＆＃13;

#wrapper {
  background: red;
  display: table;
  margin: auto;
  width: 75%;
  /* whatever you want to start with*/
  color: white;
}
#small {
  background: blue;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 1em;
}
/* set here a basic ratio to the container */

#wrapper:before {
  content: '';
  display: table-cell;
  padding-top: 50%;
}
/* FURTHER ? */

/* give a max-width to content ? */

#small>* {
  max-width: 75%;
  margin: 0.5em auto;
}

＆＃13;

<div id="wrapper">
  <div id="small">
    <p>some text, some text, some text, some text, some text, some tex</p>
    <p>some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text</p>
  </div>
</div>

＆＃13;

保持纵横比和中心文本

2 个答案: