文字按钮前的图片

Question

我试图在按钮上显示带有文字的图像。但是按钮后我无法收到文本。现在，我有一个问题，就是文字一直在图像下方移动。

我不想在CSS中显示图片，但我想保留CSS代码，以便可以复制它。

这是html部分和CSS代码

.tab {
  overflow: hidden;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: silver;
  border: none;
  color: white;
  padding: 11px 32px;
  text-align: left;
  text-decoration: inherit;
  display: inline;
  font-size: 16px;
  margin: 2px 2px;
  cursor: pointer;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  width: 100%;
  border-image-width: 14px;
}

.tab button {
  width: 100%;
  padding: 10px 24px;
}

.tab img {
  width: 5%;
  height: 1%;
  margin-left: 5px;
  vertical-align: middle;
}

<div class="tab">
  <h2><button class="tablinks" onclick="openPage('Afghanistan')"><img src="images/Afghanistan.png" alt="Afghanistan Flag" >Afghanistan</button></h2>
</div>
<div id="Afghanistan" class="tabcontent">
  <iframe src="Afghanistan.html" width="700">
  </iframe>
</div>

这是它的外观，如果您单击它，则另一个页面的iframe将会进入

Answer 1

您可以将所有可重复使用的代码放在一个类中，并为每个国家/地区加上各自的标志来单独创建一个类。

只需设置正确的填充，这样文本就不会放在背景图像上。

.tab {
  overflow: hidden;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: silver;
  border: none;
  color: white;
  width: 100%;
  padding: 10px 24px 10px 60px;
  text-align: left;
  text-decoration: inherit;
  display: inline;
  font-size: 16px;
  margin: 2px 2px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
}

.tab button.afghanistan {
  background-image: url('https://d1nhio0ox7pgb.cloudfront.net/_img/v_collection_png/32x32/shadow/flag_afghanistan.png');
}

.tab button.netherlands {
  background-image: url('https://d1nhio0ox7pgb.cloudfront.net/_img/v_collection_png/32x32/shadow/flag_netherlands.png');
}

/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  width: 100%;
  border-image-width: 14px;
}

.tab button {
  
}

.tab img {
  width: 5%;
  height: 1%;
  margin-left: 5px;
  vertical-align: middle;
}

<div class="tab">
  <h2><button class="tablinks afghanistan" onclick="openPage('Afghanistan')">Afghanistan</button></h2>
  <h2><button class="tablinks netherlands" onclick="openPage('Netherlands')">Netherlands</button></h2>
</div>
<div id="Afghanistan" class="tabcontent">
  <iframe src="Afghanistan.html" width="700">
  </iframe>
</div>

Answer 2

您应该将图像向左浮动。

Answer 3

添加显示：内联；在.tab img中像这样。
.tab img {
   宽度：5％；
   高度：1％；
   左边距：5px;
   垂直对齐：中间；
   显示：内联；
}