首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使用语义UI对div进行垂直对齐

使用语义UI对div进行垂直对齐
EN

Stack Overflow用户
提问于 2015-06-02 18:28:00
回答 3查看 48.3K关注 0票数 31

我好像在文档里找不到它。

有没有办法使用语义UI语义在页面上垂直居中显示div :)

这是我想要做的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="ui centered grid">
  <div class="eight column wide">
    <div>I want to be centered vertically on a page</div>
  </div>
</div>
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-06-03 04:42:58

http://semantic-ui.com/examples/grid.html

grid上使用middle aligned

票数 48
EN

Stack Overflow用户

发布于 2018-09-18 16:46:27

此问题在2018年初被HERE报告,但已关闭。

但是,您可以尝试执行以下操作:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="my-container" class="ui grid middle aligned">
  <div class="row">
    <div class="column">
      <div class="ui text container segment inverted">
        <h1>My DIV</h1>
      </div>
    </div>
  </div>
</div>

确保你的容器足够高

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#my-container {
  background: #000;
  height: 100vh;
  width: 100%;
}

在JSFiddle上试试:https://jsfiddle.net/Peyothe/6rjmdu1x/

票数 7
EN

Stack Overflow用户

发布于 2015-08-03 10:27:12

我只是通过使用middle和设置某些元素的高度来实现这一点:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.holder {
  height: 400px
}
.holder .middle {
  height: 100%
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<link href="https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/master/dist/semantic.css" rel="stylesheet" />

<div class="holder">
  <div class="ui middle aligned grid">
    <div class="eight column wide">
      <div>I want to be centered vertically on a page</div>
    </div>
  </div>
</div>

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30603780

复制
相关文章
JavaScript 中如何判断变量是否为数字
JavaScript 是一种动态类型语言,这意味着解释器在运行时确定变量的类型。实际上,这也允许我们在相同的代码中使用相同的变量来存储不同类型的数据。如果没有文档和一致性,我们在使用代码时并不总是知道变量的类型。
前端小智@大迁世界
2020/10/29
2.8K0
检查 JavaScript 变量是否为数字的几种方式
JavaScript 是一种动态类型的语言,这意味着解释器是在运行时确定变量类型的。这允许我们可以用同一变量中存储不同类型的数据。但是如果没有文档和保持一致性,在使用代码时,我们很有可能并不知道变量究竟是哪种类型。
疯狂的技术宅
2020/09/29
2.8K0
将 Vim 设置为 Rust IDE
Rust 语言旨在以 C++ 开发人员熟悉的方式实现具有安全并发性和高内存性能的系统编程。它也是 Stack Overflow 的 2019 年开发人员调查中最受欢迎的编程语言之一。
用户8639654
2021/09/15
1.8K0
JavaScript如何判断是否为数字?
isNaN()函数是js自带的全局函数,isNaN() 函数用于检查其参数是否是非数字值。
全栈程序员站长
2022/09/07
2.5K0
Julia(变量范围)
变量的范围是在其中可见变量的代码区域。变量作用域有助于避免变量命名冲突。这个概念很直观:两个函数都可以具有被调用x的参数,而两个函数都没有x引用相同的东西。同样,在许多其他情况下,不同的代码块可以使用相同的名称而无需引用相同的内容。相同变量名称何时引用或不引用相同事物的规则称为作用域规则。本节详细说明了它们。
云深无际
2021/04/14
3.1K1
Julia(变量范围)
go: kafka 将group设置为最新
有时,在确保group当前没有consumer的情况下,可以将这个group的偏移设置成最新,以保证下次启动时,group能从最新的消息消费。 代码:
超级大猪
2019/11/21
2.1K0
【JS】347- 理解JavaScript中的变量、范围和提升
变量是许多编程语言的基本组成部分,也是新手需要学习的第一个也是最重要的概念。JavaScript中有许多不同的变量属性,以及命名变量时必须遵循的一些规则。
pingan8787
2019/09/17
1.8K0
【JS】347- 理解JavaScript中的变量、范围和提升
JavaScript 转换数字为整数的方法
本文将会列举并说明JavaScript 把一个number(或者numerical的对象)转换成一个整数相关方法。
用户3158888
2019/05/29
1.1K0
PHP的变量范围
什么是变量的作用域?变量的作用域是指在脚本的一次生命周期内变量的有效范围。一般来说有全局和局部之分。 PHP中变量的作用域可以分为:超全局(全局变量的特殊类型,在局部范围里可直接使用),全局,局部,静态(是局部变量的特殊类型) 在PHP中,全局变量实际上是静态全局变量,如果不用unset显式的释放,那么等脚本运行结束全局变量才会被释放掉 局部静态变量细分可以是 局部静态函数变量(函数中声明的static变量),局部静态成员变量(类中声明的 static 属性,被所有类实例共享) 局部静态变量只有脚本运行结束才会被自动释放
luxixing
2019/05/29
1.9K0
JavaScript 判断输入的值为数字
使用js自带全局函数isNaN(), isNaN()返回一个Boolean值,如下 :
Devops海洋的渔夫
2019/06/02
3.5K0
将序列分解为单独的变量
python中,任何序列或可迭代的对象都可以通过一个简单的赋值操作来分解为单独的变量。前提是要求变量的总数和结构要与序列相吻合 #_*_coding:utf8_*_ p = (4, 5) x, y = p print(x) # 4 print(y) # 5 data = ['GuoJing', 30, ('杨过', '小龙女')] name, age, xialv = data print(name) # GuoJing print(xialv) # ('杨过', '小龙女') name, age, (
章鱼喵
2018/06/27
8870
怎样将Anaconda设置为国内的镜像
“ Anaconda是世界上最流行的数据分析平台(它们官网自己吹的nb),如果把镜像改为国内的可以节省很多时间。”
讲编程的高老师
2020/08/14
7.4K1
JavaScript 判断是否为数字的几种方式
我们可以用!isNaN(parseFloat(value))来判断字符串是否是数值。
全栈程序员站长
2022/07/05
4.1K0
Mac环境变量设置(以ADB为例)
按回车输入密码后用vi打开用户目录下的bash_profile文件。一定要用sudo,否则没权限保存文件。
毛大姑娘
2020/09/10
3.6K0
javascript判断一个变量是否是数字
其实判断的是有两种需求的,一种是数字或者数字字符串,一种是数值类型,下面分别做一下介绍。
IT工作者
2021/12/28
1.8K0
如何将Eclipse设置为中文版[通俗易懂]
我们知道Eclipse一个开放源代码的、基于Java的可扩展开发平台,不管学习还是工作都是一款不错的集成开发环境(IDE),但是对于一些初学者看到Eclipse上满满的英文字母可能会感到无从下手,汉化后可能还好点。
全栈程序员站长
2022/08/20
4.1K0
如何将Eclipse设置为中文版[通俗易懂]
如何将EasyCVR通道设置为默认在线?
EasyCVR平台具有强大的数据接入、处理及分发能力,可支持海量视频的轻量化接入与汇聚管理。平台可支持多协议、多类型设备接入,包括:国标GB28181、RTMP、RTSP/Onvif、海康Ehome、海康SDK、大华SDK、宇视SDK等。
TSINGSEE青犀视频
2023/05/19
1.1K0
kubesphere设置nodePort端口范围
kubesphere默认的NodePort端口范围为30000-32768,但是咱们可以修改这个范围,本文针对的kubesphere版本为3.1.1,修改/etc/kubernetes/manifests目录下的kube-apiserver.yaml文件,添加下面的配置
johnhuster的分享
2022/03/28
3.2K0
kubesphere设置nodePort端口范围
JavaScript 变量
JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 var
Devops海洋的渔夫
2019/06/02
5000
javascript -- 变量
工作中发觉原生 js 还有待加强,只好再啃一遍高程3了。 ECMAScript的变量是松散类型的,所谓松散类型就是(变量)可以用来保存任意类型的数据。换句话说每个变量仅仅是在特定的时间内保存值的占位符而已。 所谓特定的时间就是变量的生命周期。 关于生命周期就要说到‘作用域’,进而得说‘作用域链’。此处只做简单介绍,后面会详细介绍作用域和作用域链。 js中没有块状作用域( if语句 ),只有全局作用域和函数作用域。 (var定义的变量将称为该作用域中的局部变量 即全局下就是全局变量,函数内就是局部变量) 全局
大当家
2018/06/28
6760

相似问题

使用javascript将数字缩放为范围

10

将颜色键设置为数字范围

13

熊猫-将变量设置为数字

26

我们可以将变量设置为C中的数字范围吗?

40

需要将变量设置为特定的数字范围

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文