在div中将三角形居中

Question

我试图在我的div中将黑色的右指向三角形居中，但没有运气。三角形应该用作按钮。我希望三角形在框内看起来像这样：

当前，我的三角形在盒子的最左边。如何解决此问题，使其在垂直和水平方向上居中？

我的代码：

.arrow-right {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 17.3px;
    border-color: transparent transparent transparent black;
    background-color: #ffcd11;
}

<div class="arrow">
    <button class = "arrow-right"></button>
</div>

Answer 1

一种解决方案是（如果您已经在容器中添加了箭头）。使用绝对/相对位置。并将其放置在父元素的中间。

.arrow-right {
	width: 0;
    height: 0;
	border-style: solid;
	border-width: 10px 0 10px 17.3px;
	border-color: transparent transparent transparent black;
  background: yellow;
  position:absolute;
  top: calc(50% - 10px);
  left: calc(50% - 8.65px);
}
.arrow {
  width:200px;
  height: 100px;
  background: yellow;
  position:relative;
}

<div class="arrow">
	  <button class = "arrow-right"></button>
</div>

Answer 2

容器必须比完全由边框制成的孩子宽。

一点padding-left（与您的子边框宽度相同的值）可以解决此问题。

.arrow-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17.3px;
  border-color: transparent transparent transparent black;
  background-color: #ffcd11;
}

.arrow {
  display: inline-block;
  padding: 4px;
  padding-left: 17.3px;
  background-color: #ffcd11;
}

<div class="arrow">
  <button class="arrow-right"></button>
</div>

Answer 3

我认为您正在寻找类似的东西，对吧？

	(function ($) {

		var toggle = $('.arrow-right');

		if (toggle.length) {

			toggle.click(function() {

				var toggleIcon = $('.arrow');
			
				if (toggleIcon.hasClass('open')) {
					toggleIcon.removeClass('open');
				} else {
					toggleIcon.addClass('open');
				}

			});

		}

	})(jQuery);

	.arrow-right {
		width: 200px;
		height: 200px;
		margin: 0 auto;
		padding: 10px;
		position: relative;
	}

		.arrow {
			width: 150px;
			height: 150px;
			position: absolute;
			top: 50%;
			left: 50%;
			-ms-transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			transform-origin: 0% 0%;
			background-image: url('https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
			.arrow.open {
				-ms-transform: rotate(90deg) translate(-50%, -50%);
				-webkit-transform: rotate(90deg) translate(-50%, -50%);
				transform: rotate(90deg) translate(-50%, -50%);
			}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="arrow-right">
  <div class="arrow"></div>
</button>

注意：我已将按钮交换为容器，从而使整个块都可单击。

Answer 4

一个简单的解决方案。但这会使矩形更大。

.arrow {
   padding:10px; 
   background-color: #ffcd11; 
   width:20px;
}

Answer 5

这是我的解决方案，仅为int(****)[]和.arrow-right div添加CSS边距：

.arrow