圖片和文字垂直對齊
相信大家畫頁面時基本每頁必有一個這樣字的東西,圖示和文字的組合體。直接用圖示庫裡的圖示還好,然而要是圖片形式的圖示,就碰到了一個垂直對齊問題。
思路一. 分別給圖和文字設定寬高,然後再讓它們分別居中對齊不就好了,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; 然後對元素的父元素新增宣告 注意:(只給元