使CSS箭头居中
是指在网页设计中，通过CSS样式来实现箭头在元素中居中显示的效果。下面是一种常见的实现方法：
- 使用伪元素和绝对定位：
.arrow {
position: relative;
}
.arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: solid transparent;
border-width: 10px;
border-top-color: #000;
}这种方法通过给元素设置相对定位，然后使用伪元素来创建箭头，并通过绝对定位和transform属性将箭头居中显示。
- 使用flex布局：
.container {
display: flex;
justify-content: center;
align-items: center;
}
.arrow {
width: 20px;
height: 20px;
border: solid transparent;
border-width: 10px;
border-top-color: #000;
}这种方法通过使用flex布局，将箭头容器元素的内容水平和垂直居中，从而实现箭头的居中显示。
应用场景：
- 在导航栏中，用箭头表示当前选中的菜单项。
- 在轮播图中，用箭头表示切换图片的方向。
- 在下拉菜单中，用箭头表示展开或收起菜单项。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云CSS：https://cloud.tencent.com/product/css
相关·内容
2回答
使CSS箭头居中
html、css、centering
我使用以下代码为自己创建了一个箭头， height:12px; transform:rotate(-45deg);border-right:2px solid white;}
每当我尝试使用margin:0 auto居中时，它不会居中，因为我基本上只希望框的右侧的一半居中，但它使整个框居中，我该如何解决这个问题？
浏览 22提问于2017-08-15得票数 0
回答已采纳
1回答
Bootstrap span1水平定位
twitter-bootstrap、responsive-design
我这里有一个问题的例子我已经尝试了表格，填充，边距，但没有成功。
浏览 0提问于2013-07-11得票数 0
回答已采纳
1回答
jScrollPane的基本样式
jquery、jscrollpane
ready(function()$('.scroll-pane').jScrollPane( });</head>
显示箭头动作可以工作，但我不能像使用CSS (宽度、颜色)那样做任何其他更改。我看到jquery.jscrollpane.css包含我想要操作的选择器的类，但我不知道如何应用它们。
浏览 0提问于2011-12-10得票数 3
2回答
CSS -将图像放置在居中文本旁边
html、css、position
我精通HTML和CSS，但我想听听你对这方面的意见！我需要将箭头中的文本居中，但在居中文本旁边放置一个复选框。正因为如此，我不能像往常一样在箭头的所有内容上使用text-align。如果在居中包含检查，则锚点将偏离文本以包含检查，并且文本不会真正居中。
谢谢!
浏览 1提问于2011-07-10得票数 1
回答已采纳
1回答
是否可以将Internet Explorer滚动条箭头居中？
html、css、angular、internet-explorer
我目前正在使用CSS在IE滚动条上工作，我知道scrollbar-face-color，scrollbar-base-color等，但我想知道是否可以将箭头居中？按钮中的箭头显示在一个奇怪的位置，如果有什么技巧可以让它们垂直居中，那就太好了。谢谢
浏览 22提问于2019-03-08得票数 0
3回答
无法使用CSS将3张相邻照片居中
css、gallery、photos、centering
我正在构建一个使用javascript和css的图片库查看器，但我无法将元素居中。我有一张向后箭头的照片，照片本身，以及下一个箭头。这3张照片是一张一张的，我需要把这三张照片都居中。感谢任何帮助，而且，我对css/javascript/html还是个新手，所以不要对我太苛刻。谢谢你，盖伊。(你可以去guyzyl.org，进入任何图库，然后点击一张照片，看看我的意思，以及我试图居中的意思)
浏览 4提问于2012-05-18得票数 0
回答已采纳
2回答
Basic 3网格布局html/css
html、css、bootstrap-4
style="vertical-align: middle;" align="right";> </a> </div>我很抱歉问了这么多基本的问题，因为我对html/css有点陌生。谢谢。
浏览 3提问于2020-04-27得票数 0
1回答
引导弹出窗口未与箭头对齐
html、css、twitter-bootstrap、bootstrap-popover
我的弹出窗口被向上推，因为它击中了我可见屏幕的底部，但当我向下滚动时，它并没有向下移动以与箭头对齐。 })<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integ
浏览 8提问于2017-10-23得票数 1
4回答
如何将工具提示水平地居中于链接顶部
html、css、css-position
我知道这与定位框和箭头有关，但我似乎找不到正确的组合，使箭头在框下居中，并在a标记上方居中。 <span>TextTextText</span> CSS<
浏览 5提问于2014-02-11得票数 8
回答已采纳
4回答
如何在CSS中使用: using居中显示内容
html、css
我有以下css代码：悬停效果是一个蓝色的封面和一个白色的箭头，从左边滑入。取消悬停：悬停："\f04b“是白色箭头。如何使图标在蓝色框中居中？我尝试将填充添加到但它会将填充添加到整个蓝色覆盖中，而不是内部的白色图标。 -o-transition: all 0.3s ease;
transit
浏览 0提问于2018-06-21得票数 0
2回答
Material-UI:如何将分页按钮居中？
reactjs、typescript、material-ui
我试图从Material-UI获取分页，但我想将箭头按钮和页数居中。我试图通过创建一个<div style={{textAlign: "center"}}>来居中，但它不起作用，因为它都放在一个盒子里。
有没有办法进入this组件并使数字和按钮居中？
浏览 9提问于2021-09-27得票数 1
3回答
中间的文字，即使有一个右或左按钮在div？
html、css
我使用以下css对文本进行居中： text-align:center;但是，当<div>中有一个左箭头或右箭头图标时，文本会稍微偏离中心位置。是否可以使对中忽略箭头图标？这里是我的HTML，由于箭头图标，文本没有完全居中。
浏览 1提问于2015-11-25得票数 0
回答已采纳
2回答
使用带有较少项目的v幻灯片组时出现问题
vue.js、vuetify.js
我有一个问题与v幻灯片组，有时我有2~3个项目，有时我有10个或更多，但较少的项目，它不会显示箭头-幻灯片项目居中在这里是我的HTML： <v-app id="Vuetify(), model: null, methods:{
})如何至少将第二个幻灯片组中的幻灯片项目居中更好的做法是在幻灯片项目居中的情况下也显示箭头
浏览 1提问于2021-09-16得票数 2
使用before CSS子句，我在订阅按钮的顶部绘制一个小的“箭头”形状。
相对于按钮，箭头的水平居中不正确。JSFiddle:
CodePen (JSFiddle有时会倒下)：
浏览 3提问于2013-07-14得票数 0
回答已采纳
1回答
jquery幻灯片中心图像？
jquery、css、slideshow
然而，图像并不居中。我看到了增强中间宽度的jquery函数，但并不完全理解如何使这些图像居中。有没有人有建议/建议？
当箭头到达最后一个图像时，它们也会消失。如何让它们保持可见，并使图像滚动成为旋转木马？
浏览 1提问于2010-12-05得票数 0
回答已采纳
3回答
如何使CSS背景图像居中，就好像该图像具有不同的宽度(而不切断bgimg )？
css、stylesheet、background-image、centering
问题是我想让bookmarklet (在下面的图片中以红色突出显示)居中，就好像它没有箭头从侧面伸出一样。如果我在css中更改bgimage的宽度，使其与下面缩进框的宽度相同，它将按我希望的方式居中。但是，它切断了箭头的一部分。所以，我的问题是，我如何才能使bookmarklet居中，使其具有其他缩进框的宽度。#bookmarklet {
background-image:url('images/b
浏览 1提问于2012-06-18得票数 1
回答已采纳
1回答
使y轴箭头居中
octave
在此图中，y轴箭头绘制在图形的中间，而不是顶部或底部。 我认为这样做很有意义，因为箭头会周期性地反映图形本身。但是我不能把y轴箭头放在中间。到目前为止我已经读过了 axis文档 关于二维绘图的页面 但我找不到任何关于定位轴线的东西。提前感谢您的帮助。
浏览 41提问于2021-03-01得票数 0
回答已采纳
1回答
自定义JComboBox上箭头的位置(位于底部居中)
java、swing、jcombobox、ribbon
我希望能够使一个箭头居中的JComboBox，下面的文字，看起来像图片按钮从Word。我知道这里的图片按钮的用法不同于JComboBox的用法，但我更关心的是将箭头放在正确的位置。
浏览 0提问于2013-04-30得票数 1
回答已采纳
1回答
如何自动居中JSSOR箭头，以便缩略图行被考虑在内？
javascript、slideshow、jssor
在我的JavaScript中，我在箭头上指定了AutoCenter： $Class: $JssorArrowNavigator$, $AutoCenter: 2,}如何使幻灯片中的<em
浏览 2提问于2015-04-11得票数 0
2回答
如何使鼠标指针居中以使其成为十字准线？
python、python-3.x、pygame
我在GIMP上为一个游戏定制了一个光标，我希望鼠标在光标上居中。因此，普通箭头指针的尖端位于十字准线的中心。我已经隐藏了另一个光标，并显示了新的光标，我只想使它居中。
浏览 14提问于2018-02-20得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
