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;。