CSS各种对齐代码，左对齐、右对齐、中间对齐、底部对齐、两端对齐、自定义选中样式等，代码简单

原创已于 2025-10-24 15:26:02 修改 · 置顶 · 10w+ 阅读

83 ·

CC 4.0 BY-SA版权

文章标签：

#css #1024程序员节

于 2017-03-13 21:48:51 首次发布

web 同时被 3 个专栏收录

7 篇文章

订阅专栏

html5

7 篇文章

订阅专栏

jsp

4 篇文章

订阅专栏

本文详细介绍了CSS中常用的对齐方式及其代码实现，包括左对齐、右对齐、居中对齐、两端对齐等，并展示了如何使用CSS3实现div元素的水平和垂直居中。

CSS各种对齐代码，左对齐、右对齐、中间对齐、底部对齐、两端对齐、自定义选中样式等，代码简单

/*CSS代码：*/
/*左对齐*/
.left {
        text-align: left;
        border: 1px dotted black;
        width: 50%;
}
/*右对齐*/
.right {
        text-align: right;
        border: 1px dotted black;
        width: 50%;
}
/*居中对齐*/
.center {
        text-align: center;
        border: 1px dotted black;
        width: 50%;
}
/*两端对齐*/
.justify {
        text-align: justify;
        border: 1px dotted black;
        width: 50%;
}



/*css3将一个div水平和垂直居中显示*/

.div1{

    width: 100px;
    height: 100px;
    border: 4px solid red;
    position: absolute;

    text-align: center;

    left:0;
    right:0;
    top: 0;
    bottom: 0;
    margin: auto;
    /*50%为自身尺寸的一半*/
}

自定义选中样式

/*自定义选中样式（高级）:: 通过 CSS 的 ::selection伪元素，可以修改选中时的背景高亮色 */
::selection {
  background-color: rgba(255, 255, 0, 0.3); /* 黄色半透明 */
  color: inherit; /* 保持文字颜色不变 */
}