将文本对齐图像，如计算机键盘

Question

我想在每个图像的中心放置一个字符（img值）。我怎样才能实现它？我可以根据需要改变结构。

＆＃13;

＆＃13;

#container {
  width: 100%;
  height: 100%;
}
#keyboard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px;
  max-height: 200px;
  padding: 0;
  display: inline-block;
}
#block1 {
  position: absolute;
  bottom: 2px;
  width: 45.45%;
  max-width: 200px;
  height: 100%;
  display: inline-block;
  text-align: center;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
img {
  float: left;
  width: 20%;
  height: 0 auto;
  text-align: center;
  display: inline-block;
}
img:hover {
  position: relative;
  top: 1px;
  left: 1px;
  cursor: pointer;
}

＆＃13;

<div id="container">
  <div id="keyboard">
    <div id="block1">
      <img src="http://fantapr.altervista.org/tasti/registro.png">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="P">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="7">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="8">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="9">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="E">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="Clear">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="4">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="5">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="6">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="D">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="/">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="1">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="2">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="3">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="C">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="B">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="0">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value=".">
      <img src="http://fantapr.altervista.org/tasti/registro.png" value="-">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于纯CSS解决方案，您需要调整HTML，将<img>替换为<span>标记，并将每个字符添加到范围内。

我还建议使用背景图片而不是内嵌图片。

为了使其具有响应性，请在框大小和字体大小上使用viewport units vw，vh，vmin或vmax。我在以下示例中使用vw。

<强> jsfiddle

#keyboard {
  font-size: 0; /*remove whitespace*/
}
#keyboard span {
  font-family: sans-serif;
  font-size: 4vw;
  width: 10vw;
  height: 10vw;
  display: inline-block;
  background: url("http://i.imgur.com/ggrNW8F.png") 0 0 / cover;
  color: white;
  text-align: center;
}
#keyboard span:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
#keyboard span:hover {
  position: relative;
  left: 1px;
  top: 1px;
  cursor: pointer;
}

<div id="keyboard">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

Answer 2

您可以将图像包装在这样的div中。

＆＃13;

＆＃13;

 #container {
   width: 100%;
   height: 100%;
 }
 #keyboard {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   max-width: 500px;
   max-height: 200px;
   padding: 0;
   display: inline-block;
 }
 #block1 {
   position: absolute;
   bottom: 2px;
   width: 45.45%;
   max-width: 200px;
   height: 100%;
   display: inline-block;
   text-align: center;
   margin: 0;
   padding: 0;
   vertical-align: middle;
 }
 #block1 div {
   float: left;
   width: 20%;
   height: 0 auto;
   text-align: center;
   display: inline-block;
   position: relative;
 }
 #block1 div img {
   overflow: hidden;
 }
 #block1 div:after {
   content: "text";
   color: white;
   position: absolute;
   left: 0;
   right: 0;
   top: 8px;
 }
 #block1 div:hover {
   position: relative;
   top: 1px;
   left: 1px;
   cursor: pointer;
 }

＆＃13;

<div id="container">
  <div id="keyboard">
    <div id="block1">
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="P">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="7">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="8">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="9">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="E">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="Clear">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="4">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="5">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="6">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="D">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="/">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="1">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="2">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="3">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="C">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="B">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="0">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value=".">
      </div>
      <div>
        <img src="http://fantapr.altervista.org/tasti/registro.png" value="-">
      </div>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我按照你的建议。 现在我有一些问题需要解决...... 1 - 当我调整页面大小时，block1的最后一列和block3向下滑动（本地主机中的Firefox）。 如何解决这个问题？ 2 - 如何在不改变输出的情况下将边框放到任何按钮上？

为什么我的新keayboard比第一个小？像素大小是相同的，但我在屏幕上看到这个版本更小！

感谢大家的帮助！ 这是我的新代码：

＆＃13;

＆＃13;

#tastiera {    
position:absolute;
top:70vh;
left: 50%;
  
  transform: translate(-50%);

width:100vw;
max-width: 500px;
height:30vh;
padding:0;
margin:0;
display:inline-block;
font-size:0;
background-color:blue;


}
#blocco_tasti1{
	position:absolute;
	width:calc(100vw*5/11);
	max-width:calc(500px*5/11);
	
	background-color:black;
	display:inline-block;

}
#blocco_tasti2{
	position:absolute;
	left:calc(100%*5/11);
	width:calc(100vw*2/11);
	max-width:calc(500px*2/11);
	background-color:yellow;
}
#blocco_tasti3{
position:absolute;
    left:calc(100%*7/11);
	width:calc(100vw*4/11);
	max-width:calc(500px*4/11);
	background-color:black;
}
#blocco_tasti1 span {
  font-family: sans-serif;
  font-size: 15px;
  width:calc(100vw/11);
  height:calc(100vw/11);
  max-width:calc(500px/11);
  max-height:calc(500px/11);
  display: inline-block;
  background: url("http://i.imgur.com/ggrNW8F.png") 0 0 / cover;
  color: white;
  text-align: center;
  
  
}
#blocco_tasti2 span{
font-family: sans-serif;
  font-size: 15px;
  width:calc(100vw*2/11);
  height:calc(100vw*4/11);
  max-width:calc(500px*2/11);
  max-height:calc(500px*4/11);
  display: inline-block;
  background: url("http://i.imgur.com/ggrNW8F.png") 0 0 / cover;
  color: white;
  text-align: center;
}
#blocco_tasti3 span {
  font-family: sans-serif;
  font-size: 15px;
  width:calc(100vw/11);
  height:calc(100vw/11);
  max-width:calc(500px/11);
  max-height:calc(500px/11);
  display: inline-block;
  background: url("http://i.imgur.com/ggrNW8F.png") 0 0 / cover;
  color: white;
  text-align: center;
  
  
}

＆＃13;

  <div id="tastiera">
   <div id="blocco_tasti1">
                    <span>F</span>
                    <span>T</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>E</span>
                    <span id="clear"> Cl </span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>D</span>
                    <span>/</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>C</span>
                    <span>B</span>
                    <span>0</span>
                    <span>.</span>
                    <span>-</span>
   
   
   </div>
   <div id="blocco_tasti2">
   
                    <span>ENTER</span>
   </div>
   <div id="blocco_tasti3">
   <span class="registro init">D</span>
                     <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>-</span>
                    <span>X</span>
                    <span>A</span>
                    <span>A</span>
                    <span>+</span>
                    <span>!</span>
                    <span>R</span>
                    <span>*</span>
                    <span>a</span>
                    <span>b</span>
                    <span>c</span>
                    <span>d</span>
   </div>
   </div>

＆＃13;

＆＃13;

＆＃13;