css3圖片上顯示文字居中

❶ css想讓圖片和文字同時居中

text-align:center 只能用來控制文字居中的（注意text這個單詞），圖片是不聽它使喚的。
你所說的效果有多種實現方法，比較流行的方法是把圖片作為背景圖，文字則單獨控制其顯示位置，比如：

.story_class {
width: 200px;
height: 100px;
background: url(./images/story_1.png) no-repeat 40px 30px
}
.story_class h3 {
width: 100px;
height: 40px;
margin-left: 90px;
margin-top: 30px;
line-height: 40px
}

<div class="story_class">
<h3>精品散文</h3>
</div>

❷ CSS如何控制一張寬圖，在瀏覽器窗口變小的時候，隱藏左右兩頭，然後居中顯示中間部位，保持高度不變

如果不考慮IE9以下的瀏覽器，可以直接用CSS3 做。

html{
background:url(images/bg.jpg)no-repeatcentercenterfixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;}

如果要支持IE8+，且不用CSS3的話，可以這么做，但是不支持opera瀏覽器

<divid="bg">
<imgsrc="images/bg.jpg"alt=""></div>

#bg{
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;}#bgimg{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;}

如果要IE7以上的話，只能用Jquery了。
(function(){varwin=$(window);win.resize(function(){

varwin_w=win.width(),
win_h=win.height(),
$bg=$("#bg");

//
//viewportwidth,butneverloadanythingnarrower
//thatwhat'salreadyloadedifanything.varavailable=[
1024,1280,1366,
1400,1680,1920,
2560,3840,4860
];

varcurrent=$bg.attr('src').match(/([0-9]+)/)?RegExp.$1:null;

if(!current||((current<win_w)&&(current<available[available.length-1]))){

varchosen=available[available.length-1];

for(vari=0;i<available.length;i++){
if(available[i]>=win_w){
chosen=available[i];
break;
}
}

//Setthenewimage$bg.attr('src','/img/bg/'+chosen+'.jpg');

//fortesting...//console.log('Chosenbackground:'+chosen);
}

//%if((win_w/win_h)<($bg.width()/$bg.height())){
$bg.css({height:'100%',width:'auto'});
}else{
$bg.css({width:'100%',height:'auto'});
}

}).resize();
})(jQuery);

我們一般直接用第一個方法，不考慮IE9以下的全尺寸，在IE7Ie8寫一些fallback的style。說真的，IE真是討厭

❸ css 怎麼設置文字在圖片上並居中

1、首先，打開html編輯器，新建html文件，例如：index.html。

❹ 在CSS中居中的代碼是什麼

1. 通過vertical-align:middle實現CSS垂直居中是最常使用的方法，但是有一點需要格外注意，vertical生效的前提是元素的display：inline-block。因為inline-block可以兼具行內元素和塊級元素的特點，能夠使得元素有寬度和高度。從而在盒子內能夠實現居中

   

   括展資料：

   層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標准通用標記語言的一個應用）或XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS網路CSS參考手冊
   

❺ css html 如何將圖片img標簽 水平居中 垂直居中 和水平垂直居中

1、第一種css代碼如圖所示。display設置成table-cell，text-align為center，垂直居中設置vertical-align為middle。

❻ 通過CSS+DIV怎麼將文字寫在圖片上方

HTML圖片和文字是並列顯示的。如下：

代碼總匯

HTML

<div class="img-group"> <img src="img/snow.png">
<div class="img-tip">我是雪豹</div></div>

CSS

.img-group { position: relative; display: inline-block;
}
.img-tip { position: absolute; bottom: 0; background: #333; color: #fff; opacity: 0.6; display: none;
}
.img-group:hover .img-tip { display: block; width: 100%; text-align: center;
}

❼ 這個CSS3字體怎麼水平居中求大神

「全部」這個字是在區塊裡面的，你可以記住：

如果你想水平居中可以使用text-align:center;
你想垂直居中的話可以使用ling-height的屬性，記住，一定是要設置區塊本身的高度才行，比如你設置容器的高度是height:10px;這時就可以設置垂直居中ling-height:10px;

希望幫助到你！

❽ 為什麼 CSS 3 要實現垂直居中那麼的難

CSS3實現居中其實也沒那麼難，有如下幾種方法可以實現：
1 使用絕對定位
top:50% margin-top:-height/2
2 使用display中的table和table-cell，如：
#cross2 {
height: 100%;
width: 100%;
display: table; /*讓元素以表格形式渲染*/
}

#cross2 .table-cell {
display: table-cell; /*讓元素以表格的單元素格形式渲染*/
vertical-align: middle; /*使用元素的垂直對齊*/
text-align: center;
}
3 使用float，如
#cross3 #floater {
float: left;
height: 50%; /*相對於父元素高度的50%*/
margin-bottom: -50px; /*值大小為居中元素高度的一半（100px/2）*/
}

❾ css中怎樣讓圖片在文字中居中顯示

現實的網頁上沒有見過，word中存成html網頁也不能實現居中。

非要居中不可的話，用3列的表格可以實現，也可以用浮動的3列欄。不過兩側文字的字數不好控制。

❿ CSS 一個DIV裡面的文字如何上下左右居中顯示

這樣：

body{ margin:0; padding:0; width:100%;

height:100%;

} div{ position:absolute; top:50%; left:50%; margin-top:-250px;margin-left:-250px; /*此時寬和高都要固定*/ width:500px; height:500px; } body{

margin:0;

padding:0;

width:100%;

height:100%;

}

div{

position:absolute;

top:50%;

left:50%;

margin-top:-250px;

margin-left:-250px;

/*此時寬和高都要固定*/

width:500px;

height:500px;

}

(10)css3圖片上顯示文字居中擴展閱讀：

注意事項

一、用兩個值就可以了

1、text-align:center;

//這是讓文字左右居中

2、line-height:100px;

//這是讓文字垂直居中

vertical-align:middle;

//這個屬性不能讓文字垂直居中，該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

二、多行文本垂直居中分為兩種情況，一個是父級元素高度不固定，隨著內容變化；另一個是父級元素高度固定。

1、父級元素高度不固定

父級高度不固定的時，高度只能通過內部文本來撐開。可以通過設置內填充（padding）的值來使文本看起來垂直居中，只需設置padding-top和padding-bottom的值相等：

<!--html代碼-->

<div id="div1">

這是多行文本垂直居中，

這是多行文本垂直居中，

這是多行文本垂直居中，

這是多行文本垂直居中。

</div>

/*css代碼*/

#div1{

width: 300px;

margin: 50px auto;

border: 1px solid red;

text-align: center; /*設置文本水平居中*/

padding: 50px 20px;

}

2、父級元素高度固定

只對擁有valign特性的元素才生效，結合display: table;，可以使得div模擬table屬性。因此可以設置父級div的display屬性：display: table;；然後再添加一個div包含文本內容，設置其display:table-cell;和vertical-align:middle;。