问题：

将youtubeicon对齐到中心

乐正涵忍

2023-03-14

有一个页面站点视图。有一段代码（我想将图像)居中）

null

body {
    margin: 0;
    padding: 0;
}

.globalcontainer {
    margin-top: 0px;
    margin-right: 4%;
    margin-bottom: 0px;
    margin-left: 4%;
    height: 100%;
}

.header > .header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;

font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */


color: #000000;
}

/*
.header__buttons {
    left: 0;
    top: 193px;
}
*/


.header__button {
    width: 75px;
    height: 30px;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 1.75%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.header__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 15px 7px 0px;
    /*margin-right: 10%;*/
}

.content {
    width: 100%;
}

.cardexample {
    width: 100%;
}

.mobileimage img{
    max-width: 100%;
    height: auto;
}

.mobiles {
    max-width: 100%;
}

.content__title {
    font-family: TTNorms-Medium;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21.6px;
    
    margin: 0.3% 15px 0 15px;
}

.crashvideo {
    width: 115px;
    height: 30px;
    border-radius: 4px;
    margin-top: 15px;
    
    background-color: #5f3ec0;
    color: #ffffff;
}

.youtube__icon-play {
    margin-left: 30.5px;
    margin-top: 20.5px;
    
    align: center;
}

<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
    <div class="globalcontainer">
        <div class="header">
                <div class="header__text">
                    Обзоры
                </div>
                <div class="header__buttons">
                    <!-- <span> -->
                        <button class="header__button">Все</button>
                        <button class="header__button">Видео</button>               
                        <button class="header__button">Текст</button>               
                        <button class="header__button">Обзоры</button>
                        <button class="header__button">Сравнения</button>
                        <button class="header__button">Краш видео</button>
                        <button class="header__button">Распаковка</button>
                    <!-- </span> -->
                </div>
        </div>      
        <div class="content">       
                <div class="cardexample">
                    <div class="mobileimage">
                        <img class="mobiles" src="../img/mobileimage.png">
                    </div>
                    <div class="content__title">
                        Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
                        <span class="video__icon">
                            <span>
                                <button class="crashvideo">Краш видео</button>
                            </span>
                            <span>
                                <img class="youtube__icon-play" src="../img/Vector.png">
                            </span> 
                        </span>
                    </div>
                </div>
                <div class="cardexample">
                </div>
                <div class="cardexample">
                </div>
                <div class="cardexample">
                </div>
        </div>      
    </div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>

null

如下图所示（我想将图像)居中）

Youtube图标

如何实现像第一个链接上的显示？（我想将按钮居中）

共有1个答案

柴意智

2023-03-14

你的图像没有显示，所以很难准确判断…但是要将图标居中与video_icon中的按钮对齐，请尝试以下操作

   .video__icon {
        display: flex;
        align-items: center;
    }

类似资料：

将图像对齐到较小div的中心

问题内容：我有一个div，并且（说）里面有一个图像，高度始终固定为。我想使图像水平居中。这里有3种情况：图片的宽度等于div的宽度，没有问题图片的宽度小于div的宽度，我可以在这里使用图片的宽度大于div的宽度我希望图像的中心部分在div内可见。意味着，如果image的宽度为和div的宽度为，并且我希望图像的第10 px至110 px可见（因此，和的图像隐藏在div下）是否可以
将项目对齐到中心，在SAPUI5中不起作用

本文向大家介绍将项目对齐到中心，在SAPUI5中不起作用，包括了将项目对齐到中心，在SAPUI5中不起作用的使用技巧和注意事项，需要的朋友参考一下如果您想要一个快速的解决方案，则可以使用基本的CSS属性（如用于左右对齐的填充）来对齐内容。使用相对百分比，这样它就可以在两个视图中使用。看起来理想的其他方法是定义自定义CSS。然后，您需要添加此自定义CSS来显示。将相关属性设置为Margin：0
如何将换行文本对齐到中心[重复]

我有一个元素，它被包装在较小的屏幕中，如何使用CSS使包装的文本对齐自己？这就是我想要的
将文本对齐到div的底部

问题内容：我尝试将我的文本与其他文章和答案中的div底部对齐，以了解Stack Overflow中的其他问题，并学会了使用不同的CSS属性来处理此问题。但是我做不到。基本上我的HTML代码是这样的：效果是，在FF中，我仅获得垂直线（div处于折叠状态），并将文本写在其旁边。如何防止折叠但宽度适合文本？问题答案：弹性解决方案如果您想使用该解决方案，那将是非常好的。但是，除了破解之外，我们还
试图将html按钮对齐到我页面的中心

问题内容：我正在尝试将HTML按钮准确地对准页面的中心，而不管所使用的浏览器如何。它既可以漂浮在左侧，而仍保持在垂直中心，也可以漂浮在页面上的某处，例如页面顶部等。我希望它在垂直和水平方向都居中。这是我现在写的：问题答案：基本上，将按钮放入带有居中文本的div中：具有以下样式：有很多方法可以给猫咪剥皮，而这只是其中一种。
Java-将JTextArea右对齐

问题内容：我可以将JTextArea中的文本向右对齐（或通常更改文本对齐方式）吗？我一直在搜索数小时，似乎其他人之前也曾问过这个问题，但没有好的答案（这确实有效）。提前致谢！问题答案：尝试使用或代替。有关更多信息，请查看此线程在JEditorPane中的文本垂直对齐样例代码：编辑你可以试试

将youtubeicon对齐到中心

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档