日度归档:2020年1月16日

css 如何使元素靠左或靠右对齐呢?


摘要:
下文讲述使用css脚本使元素靠左或靠右对齐,如下所示:


实现思路:
使用position:absolute 相对父级元素的定位,
然后使用right:0px 或 left:0px 靠左或靠右定位的方式
使元素靠左或靠右

例:
元素靠左 靠右定位举例

<html>
<head>
<style>

.divAll
{
   background-color:black;
   width:400px;
   height:400px;
   color:white;
   position:absolute;
   left:0px;
   top:10px;
}


.right {
    position: absolute;
    right: 0px;
    width: 100px;
    border: 3px solid white;
    padding: 10px;
}

.left{
    position: absolute;
    left: 0px;
    width: 100px;
    border: 3px solid white;
    padding: 10px;
}
</style>
</head>
<body>
<h2>右对齐和左对齐演示</h2>

<div class="divAll">

<div class="left">
  <p>左对齐举例</p>
</div>
 
<div class="right">
  <p>右对齐举例</p>
</div>

</div>

</body>
</html>
css  左对齐  右对齐的方法

css 左对齐 右对齐的方法

css 如何使图片水平居中对齐呢?


摘要:
下文讲述在css中让图片水平居中对齐,如下所示:


实现思路:
使用margin:auto属性使其水平居中对齐

例:
让图片在DIV中水平居中对齐

   <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
#divImg{
   background-color:blue;
   width:300px;
   height:300px;
}

#divImg>img{
    display: block;
    margin: 0 auto;
}
</style>
</head>
<body>

<h2>图片在Div中水平居中对齐
   使用margin:auto实现
</h2> 
<div id='divImg'>

     <img src="http://www.maomao365.com/wp-content/uploads/2020/01/css_%E6%96%87%E6%9C%AC%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%AF%B9%E9%BD%90%E7%9A%84%E4%B8%BE%E4%BE%8B%E5%88%86%E4%BA%AB_11572.gif"  style="width:40%">

</div>

</body>
</html>
css 图片水平居中对齐的举例

css 图片水平居中对齐的举例

css 如何让“文本”在父级元素中水平居中对齐呢?


摘要:
下文讲述在css中,将文本水平居中对齐的方式分享,如下所示:


实现思路:
文本元素在父级元素中水平对齐,使用 text-align: center 即可实现此功能

例:
文本在div中水平居中对齐

 <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
.center {
    text-align: center;
    border:1px solid blue;
	background-color:black;
	color:white;
}
</style>
</head>
<body>

<h2>div中文本举例应用</h2>

<div class="center">
  <p>此文本会被水平居中对齐</p>
</div>

</body>
</html>  
css 文本水平居中对齐

css 文本水平居中对齐