圖片和文字垂直對齊

阿新 • • 發佈：2019-01-21

相信大家畫頁面時基本每頁必有一個這樣字的東西，圖示和文字的組合體。直接用圖示庫裡的圖示還好，然而要是圖片形式的圖示,就碰到了一個垂直對齊問題。

思路一. 分別給圖和文字設定寬高，然後再讓它們分別居中對齊不就好了,line-height和vertical-align結合使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<style>
    .main {
      margin: 2.5rem auto;
      text-align: center;
      height: 1.5rem;
      line-height: 1.5rem;
    }
    i {
      display: inline-block;
      width: 0.675rem;
      height: 0.525rem;
      background: url(../img/eye.png) 0 center no-repeat;
      -webkit-background-size: 0.675rem 0.525rem;
      background-size: 0.675rem 0.525rem;
      text-indent: 0.925rem;
      height: 0.8rem;
      line-height: 0.9rem;
    }
    .m-txt {
      font-size: 0.6rem;
      vertical-align: middle;
    }
</style>
	</head>
	<body>
		<div class="main">
			<i></i><span class="m-txt">我要和圖片對齊</span>
		</div>
	</body>
</html>

然而現實是這樣子的.

最終找到的解決方案是直接使用flex佈局.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--<link rel="stylesheet" href="css/index.css" />-->
		<style>
			.main{
			   display: flex;
			   align-items: center;/*子元素垂直居中*/
			   justify-content: center;/*子元素水平居中*/
			}
			i{
			  display: inline-block;
			  width: 0.675rem;
			  height: 0.525rem;
			  background: url(img/eye.png) 0 center no-repeat;
			  -webkit-background-size: 0.675rem 0.525rem;
			  background-size: 0.675rem 0.525rem;
			}
			
			.m-txt{
				font-size: 0.6rem;
			}
		</style>
		<script>
			(function(doc, win) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if(!clientWidth) return;
						docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
						if(clientWidth>1260){
							docEl.style.fontSize = 40+'px'
						}
					}();
				if(!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>
	</head>
	<body>
		<div class="main">
			<i></i><span class="m-txt">我要和圖片對齊</span>
		</div>
	</body>
</html>

圖片和文字垂直對齊

相信大家畫頁面時基本每頁必有一個這樣字的東西，圖示和文字的組合體。直接用圖示庫裡的圖示還好，然而要是圖片形式的圖示,就碰到了一個垂直對齊問題。思路一. 分別給圖和文字設定寬高，然後再讓它們分別居中對齊不就好了,line-height和vertical-align結合使用。&l

關於圖片和文字水平對齊

如圖所示想讓愛心和數字水平對齊方法1 對圖片新增和文字都新增屬性 vertical-align:middle。方法2 對圖片和文字兩個元素都新增浮動，然後父元素的after清除浮動。 .love:after{ content: “020”; display: block; heigh

讓圖片和文字居中對齊的方法

如果一個盒子有2列或者3列排列，有圖片，有文字，怎麼實現文字始終對齊圖片的中間位置呢？方法就是使用vertical-align:middle;也就是給一列都使用這個屬性，需要注意的是：這個屬性只對行內元素起作用，如果不是行內元素要加上diaplay:inli

Android TextView圖文混排,圖片和文字居中對齊

TextView用來顯示文字是最普通的用法了,有些情況需要我們再文字中顯示圖片,比如顯示錶情,下邊來說說處理方法. 1.下圖是專案中一個UI需求如圖需要在文字的前邊顯示新上標籤,開始的處理方法是用了兩個空間分別顯示標籤和文字,但是有個問題是第二行的文字

Android 解決圖文混排，圖片和文字居中對齊問題(ImageSpan)

一. 概述眾所周知，Android圖文混排可以通過SpannableString來實現，通過在相應位置使用ImageSpan替換即可，但是使用過的人會發現，imageSpan只提供了兩種對齊方式，如下所示： /** 底部對齊

css 圖片　文字居中對齊

例： <li> <span class='al'> <a href="#"> <img class="p_pic" src="pic.jpg"> <span class="name"> nima

HTML中標籤屬性，1.水平對齊和2.垂直對齊。（表格）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格屬性（水平對齊和垂直對齊）

css實現圖片與文字底邊對齊

通常圖片與文字放在一起的時候圖片往往會偏上，通過設定margin-bottom可以達到文字圖片底邊對齊的目的我們在做網頁的時候, 會遇到一個圖片和文字位置對不齊的問題.(一般表現在圖片總是比文字高點) 解決問題最好的辦法：.一個關鍵的屬性: margin-bott

圖片和文字垂直居中-flex佈局

因為float和position用的比較熟，所以flex只是瞭解了一下，基本不用。但是今天發現了flex在處理圖片和文字對齊方便真是超爽der~ 1.需求就是一個盒子裡面，圖片和文字垂直居中 2.慣用套路我之

讓div裏的圖片和文字垂直水平居中

eight 裏的 bottom mage lis base right img mar <div id="tabList" style="height:40px;"> <li style="display:inline;font-size:14px;"

div css 圖片和文字上下居中對齊

log ima 圖片 lin 效果 ges 馬克思 pos 需要想要圖片和文字水平居中對齊很容易,可今天做這個樹的時候,遇到了要將圖片上下居中.這下就不知道怎麽搞. 拿手冊看也看不出所以然來,不同的瀏覽器對DIV的支持不一個,目前最好的瀏覽器是Firefox.

自定義view，繪製階段進度progressBar，階段與圖片和文字對齊

沒用seekbar或者progressbar原生控制元件，通過繪製實現。只講下有用的思想，無關屬性不解釋，也不用看。主要看onDraw方法程式碼：繪製背景線，canvas.drawRect線繪製了第一條線，因為需要漸變，可以看到canvas.drawPath是從第

css 實現文字圖片垂直對齊

給圖片使用vertical-align:middle;就可以實現 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</

DIV+CSS 讓同一行的圖片和文字對齊【轉】

在div+css佈局中，如果一行(或一個DIV)內容中有圖片和文字的話，圖片和文字往往會一個在上一個在下，這是一個新手都會遇到問題，我的解決方法有三： 1.新增CSS屬性：vertical-align:middle; 程式碼： <style> a img{b

CSS 讓同一行的圖片和文字對齊

大家在做前端開發的時候那，經常會遇到img標籤和文字在同一行。那麼我剛開始的時候那是利用的float浮動佈局解決的，定位佈局（相容性需要調整不划算）下面給大家介紹一些其他的方法： 1.新增CSS屬性：vertical-align:middle; 程式碼： &l

CSS控制圖片和文字在同一行顯示且對齊的3種方法

“vertical-align:middle” 對display:inline-block有用一般應用：圖示文字一行顯示，文字多的，圖示和文字居中顯示的 .s-li{width:100%;font-size:0px;} .s-i{display:inline-blo

HTML圖片和文字一行時的對齊方式

<img src="" align="absmiddle"><span>文字</span> absmiddle 圖片中間與同一行最大元素中間對齊； absbot

小程序圖片和文字放在一行對齊的方法

程序技術 mage bubuko 橫線 con center 其他 none <view class=‘setting‘ bindtap=‘jumpLogin‘> <image class=‘btnImg‘ src=‘../image/settin

關於文字在TextBox中的垂直對齊問題

如何允許外部Class修改某個Class的某一個屬性關於C#窗體設計能不能往TextBox控制元件的特定位置座標中輸入文字如何允許外部Class修改某個Class的某一個屬性關於C#窗體設計能不能往TextBox控制元件的特定位置座標中輸入文字 codorvaremotebu

通過css和js設定內容不確定的兩行文字兩端對齊

效果如圖所示：思路： 1.先通過css樣式設定兩行兩端對齊，但是會有一個問題，隨著兩行的內容的不確定，沒辦法固定兩行的寬度，通過第二步解決首先元素新增如下宣告達不到效果 text-align: justify; 然後對元素的父元素新增宣告注意：（只給元

圖片和文字垂直對齊

相關推薦