如何在ionic 4中使用css将时间轴居中
在Ionic 4中使用CSS将时间轴居中，可以通过以下步骤实现：
- 创建一个时间轴容器元素，可以是一个
<div>或者其他适合的元素。 - 使用Flexbox布局来实现居中对齐。在容器元素上添加以下CSS样式：
display: flex;
justify-content: center;
align-items: center;这将使容器元素的子元素在水平和垂直方向上都居中对齐。
- 在时间轴容器中添加时间轴的内容，例如时间节点和连接线等。
以下是一个示例的HTML结构和CSS样式：
<div class="timeline-container">
<div class="timeline-node"></div>
<div class="timeline-line"></div>
<div class="timeline-node"></div>
<div class="timeline-line"></div>
<div class="timeline-node"></div>
</div>.timeline-container {
display: flex;
justify-content: center;
align-items: center;
}
.timeline-node {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
}
.timeline-line {
width: 2px;
height: 50px;
background-color: #000;
}在上述示例中，.timeline-container是时间轴容器，.timeline-node是时间节点，.timeline-line是连接线。通过Flexbox布局，时间轴将在水平和垂直方向上居中对齐。
请注意，以上示例只是一个简单的示例，实际应用中可能需要根据具体需求进行调整和扩展。
关于Ionic 4的更多信息和使用指南，您可以参考腾讯云的Ionic产品介绍页面：Ionic产品介绍
相关·内容
有谁能解释一下为什么Chrome (版本78.0.3904.97)不支持flexbox css在网页中居中显示Twitter时间轴？
使用Twitter生成的代码将Twitter时间轴嵌入到网页中，我发现在Chrome中尝试将时间轴居中是不可能的。它在Safari中工作得很好。
/* html snippet */
<div class="twt">
<a class="twitter-timeline" data-width="640" data-height="860" href="ht
浏览 15提问于2019-11-18得票数 0
1回答
我想在ionic中水平居中一个元素，在左边和右边具有相同的边距
<div class="tabs-group" class="ion-justify-content-center">
<ion-row>
<ion-col *ngFor="let i of tabsName,let j = index" size="4" (click)="switchToTabs(tabsindicator[j])" [ngClass]="tabs[tabsindicator[
浏览 28提问于2021-03-11得票数 1
回答已采纳
好的，我使用的是Ionic框架，我有两张卡片(Div)。把卡片当作你应该选择的问题。在这些卡片之间，我希望“或”这个词能够完美地居中，即使卡的大小因文本内容而发生变化。有没有办法保持这个“或”完美地使用css居中？
浏览 1提问于2015-07-15得票数 0
回答已采纳
1回答
我正在升级我的Ionic应用程序版本：
ionic: ionic-bower#1.2.4
ionic-platform-web-client": ^0.7.1
cordova: 6.1.1
升级后，背景图像没有居中，我的CSS代码是：
body {
background:url('../img/splash.png') rgb(227,227,213) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o
浏览 0提问于2016-05-03得票数 1
回答已采纳
在Ionic 4中，文本如何在<ion-item-divider>元素中水平居中？
我在Ionic 4 中找不到任何关于居中html组件文本的内容。在IONIC3文档中，我找到了如下所示的text-center属性实用程序，并记录了，但它不起作用。
<ion-content padding>
<ion-list>
<ion-item>
Hello, I am left aligned
</ion-item>
<ion-item-divider text-center>
P
浏览 34提问于2018-07-29得票数 6
回答已采纳
1回答
我有一个没有固定高度的div元素，我想让它在父元素中垂直居中，而不考虑它的高度。我在现代浏览器中使用了display: table-cell技术，但是这种技术在IE7及更低版本中似乎不起作用。有什么方法可以在IE7及以下版本中使用纯CSS实现这种垂直居中的效果吗？提前谢谢。
浏览 2提问于2012-08-30得票数 1
我用ionic-react为android创建了一个应用程序。Ionic react使用电容器代替cordova。我不知道如何在我的ionic-react应用程序中使用cordova插件。有cordova和ionic原生插件android-full-screen，但我不知道如何在我的应用程序中使用它。
我会给你看我的App.tsx。我希望我的应用程序从开始就是全屏的，例如在componentDidMount上。请帮帮忙，我在找几天，但找不到解决这个问题的方法。谢谢。
import React, {Component} from 'react';
import {Redirect
浏览 4提问于2019-10-29得票数 0
2回答
我已经在页面上放置了一些文本和一个按钮。我目前正使用我所知道的传统css方法将其居中。这是在IONIC 2中居中的正确方式吗？
<ion-content padding class="login-signup">
<ion-card>
<div class="or-label">
SOME-TEXT
</div>
<div class="signup-button">
<button outline>Signup</button>
浏览 0提问于2016-06-28得票数 8
回答已采纳
我对Ionic很陌生，但我已经喜欢了。我想使用nav-bar，所以我实现了以下index.html：
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 's
浏览 0提问于2015-05-02得票数 26
回答已采纳
1回答
我正在尝试将标签/名称放在项目列表中的头像旁边。我正在使用离子v1。
这是我的文件：
<!DOCTYPE html>
<html>
<head>
<link data-require="ionic@*" data-semver="1.3.1" rel="stylesheet" href="https://code.ionicframework.com/1.3.1/css/ionic.min.css" />
<script data-require="
浏览 3提问于2017-04-29得票数 0
2回答
我用Ionic框架创建了一个角度项目，但是我也想使用Bootstrap，我是如何使用它的，
我安装了引导程序，并更改了angular.json文件，如下所示：
"styles": [
{
"input": "src/assets/styles/theme/variables.scss"
},
{
"input": "src/assets/styles/global.scss"
浏览 0提问于2020-08-04得票数 0
1回答
我想将未经身份验证的用户重定向到/login。我的上下文中有一个名为loggedIn的属性，当它是false时，我想重定向到HomePage i."/"。
我只是被路线结构弄糊涂了。我到处都能看到一条受保护的路线。
import React, { useContext, useEffect } from "react";
import { Redirect, Route } from "react-router-dom";
import { IonApp, IonRouterOutlet, IonSplitPane } from "@io
浏览 1提问于2021-02-14得票数 0
回答已采纳
3回答
我正试图在我的项目中使用SASS。我打开这个链接并执行所有命令。我创建了一个项目并安装了SASS。
我有这个目录结构
scss
|
|—>ionic.app.scss
www
|
|->css
|
|——>ionic.app.css
在index.html文件中，我在style标记中导入了ionic.app.css。因此，无论我在ionic.app.scss文件中更改了什么，它都会出现ionic.app.css文件并在视图中进行反映。
如果我在index.html中添加了一些元素，例如
浏览 2提问于2015-06-21得票数 7
3回答
我的代码使用了几个ion-item元素。当我运行代码时，问题出现了，ion-item标签导致卡片中的文本被切掉，并以"...“结尾。在最后。
这是它看起来像的东西。
.card {
width: 130px;
height: 130px;
background-color: black;
margin: 0px;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0px 0px 5px black;
displ
浏览 2提问于2021-01-04得票数 1
2回答
我使用的是Kale Wordpress主题，在页脚，我使用了一个图像小部件作为我的徽标。我正在尝试使用自定义下面的附加CSS面板居中显示此图像。我相信我的居中代码是正确的，我只是在识别适当的选择器或类时遇到了问题，以便让CSS知道我想要居中的内容。
我尝试使用Chrome中的Inspect元素来查找它所说的图像的类名，但无济于事。
.image wp-image-14 attachment-medium size-medium .footer-row-3-widget widget widget_media_image {
display: block;
margin: 0 auto;
浏览 0提问于2018-01-18得票数 0
1回答
占位符属性“文本对齐:居中”在IOS中不起作用，文本位于顶部，但在"ionic serve -l“和所有浏览器中都有效，但在设备中不起作用。css如下所示：
.input-login{
color: white !important;
font-family: 'Din Condensed';
font-size: 22px !important;
text-align: center;
}
图片：
谢谢
浏览 26提问于2017-02-21得票数 0
我正在使用DHTMLX甘特图，我必须在日期上面的第二列(图表部分)内再创建一行，并通过与日期匹配将该行划分为7列。目前，我已经在独立行中创建了自定义div。我尝试使用在第二个列对象中添加行，但它不起作用。下面是代码
html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css'>
<scri
浏览 3提问于2020-12-16得票数 1
过去几个月，我一直致力于开发IBM + Ionic应用程序，但我仍然无法找到使用SASS的方法。到目前为止，我的管理方式是，我将有一个带有SASS设置的静态Ionic项目，我将重用/复制粘贴这个静态www文件夹到实际的MobileFirst项目common文件夹中的HTML和CSS。
是否有更好的方法，比如在MobileFirst项目上设置一个节点+ gulp？
NB: --我正在使用IBMS7.0.0
干杯!
浏览 0提问于2016-05-21得票数 1
回答已采纳
我想要我的离子项目，采取一个屏幕截图，并将它存储在相机卷。目前，按钮无法拍摄任何屏幕截图。我正在android设备上测试这个应用程序。我正在使用这个插件：
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link
浏览 2提问于2016-06-23得票数 0
回答已采纳
我一直试图通过编辑一个从互联网上获得的网站模板(它使用引导)来学习css/html，但我遇到了一个障碍。我有一个水平元素的列表。我想把这些元素集中起来，但我不知道怎么做。这是代码：
<div class="row">
<nav>
<ul>
<li><a href="#about">Over ons</a></li>
<li><a href="#services">Die
浏览 11提问于2016-02-21得票数 0
回答已采纳
9回答
可以在div中居中显示背景图像吗？我几乎什么都试过了--但没有成功：
<div id="doit">
Lorem Ipsum ...
</div>
//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }
这个是可能的吗？
浏览 8提问于2011-02-18得票数 151
回答已采纳
1回答
我知道Ionic 2有一个黑暗的主题( ionic-angular节点模块附带了文件css/ionic.dark.css)。
如何将其导入到我的Ionic应用程序的SASS中？
我尝试过在@import ionic-angular/css/ionic.dark.css和src/app/app.scss中使用src/theme/components.scss，但是输出在视觉上与初学者主题相同。
编辑以添加我的ionic info
Cordova CLI: 6.2.0
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
OS: Distri
浏览 4提问于2016-11-04得票数 12
回答已采纳
5回答
我已经用谷歌搜索过很多次了，我不明白为什么我的div不会居中。
HTML：
<body><div id="mydiv"></div></body>
css
*{
margin:0;
padding:0;
}
html,body{height:100%; width:100%;}
#mydiv{
height:50%;
width:50%;
background:grey;
margin:au
浏览 0提问于2013-03-14得票数 1
回答已采纳
1回答
我试图将用户发送到登录页面后，一个初步的动画已经完成。动画执行需要两秒钟时间，所以我设置了一个设置超时，执行时间为3秒，但是它说在中加载网页是不可能的，它给了我一个net::ERR_INVALID_RESPONSE错误。
这是我的代码：
import React, { useEffect } from 'react';
import { IonApp } from '@ionic/react';
import "./css/main.css";
/* Core CSS required for Ionic components to work
浏览 0提问于2021-08-25得票数 2
回答已采纳
我得到了这个错误：
我不确定我的index.html出了什么问题。我目前正在ionic1上开发一个应用程序，当我试图通过safari检查我的代码时，会产生这个错误。我已经了解到，当标签未关闭时会出现此错误，但在我的情况下，我不知道我错在哪里。可以是什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-sc
浏览 0提问于2018-07-31得票数 0
2回答
我是Ionic 2的新手，所以如果这是一个愚蠢的css问题，请原谅。如何更改iOS日期选择器在屏幕上的位置？它默认位于屏幕底部，但我希望将其垂直居中。
我注意到，在DOM中，日期选择器有一个datepicker-wrapper类，它有一个transform: translateY(0%)属性，但是我还不知道如何处理这个属性。
浏览 25提问于2017-01-12得票数 0
我想让ion-img在ion-card中居中。
HTML：
<ion-grid>
<ion-row >
<ion-col size="12" class="ion-justify-content-center">
<ion-card button="true">
<ion-card-content class="ion-align-items-center">
<!--center this ima
浏览 10提问于2021-05-19得票数 0
回答已采纳
1回答
我测试了好几个月的angular + ionic，我用了很多<ion-grid>。但由于我正在做的应用程序将在桌面和移动设备上使用，所以有时我需要非常不同的布局，而有时我发现使用ion-grid组件的flexbox方法很难实现这一点。 有没有办法替代ionic中的CSS Grid(https://css-tricks.com/snippets/css/complete-guide-grid/ )？这将使一些布局变得容易得多。 这是离子直接支持的吗？或者这需要我直接在CSS中创建它？如果不是由Ionic直接支持，它的缺点是什么？
浏览 30提问于2020-04-15得票数 1
回答已采纳
1回答
在离子中设置默认视图
、、、、
我被困在一些很简单的事情上，似乎找不出我做错了什么。我用离子型创建了一个空白项目，并希望将默认主屏幕设置为加载的第一个视图。当我在浏览器中运行这个程序时，我正盯着一个空白的屏幕。
我的代码如下：
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a &
浏览 2提问于2016-01-13得票数 0
回答已采纳
2回答
是否有任何方法来改变CSS节点模块的内容在离子反应？我为我的应用程序创建了一些外部css，但是导入中的css“@ in / App / css /typography.css”覆盖了我的css。例如，我不能改变一些边距，文字颜色等。我也试图改变一些在typography.css内的css，但更改没有加载在应用程序中。就好像我在typography.css里什么都没改变一样。
当我第一次在Ionic应用程序中使用CSS时，我感到非常困惑。任何帮助都将不胜感激。
浏览 4提问于2021-04-29得票数 0
回答已采纳
2回答
我已经看过其他一些答案，但无法让它们适用于我的特定情况。我已经简化并包含了下面的整个代码块。基本上，它只在蓝色框中显示文本。我想知道如何使盒子居中。
<!DOCTYPE html>
<html>
<head>
<style type="text/css"><!--
#content {
width:500px;
padding: 10px 10px 10px;
background-color: #D1ECFF;
position: relative;
border-radius: 10px;
-webki
浏览 1提问于2012-01-22得票数 0
2回答
我有一个按钮，我想在ionic中居中，我已经尝试了文本对齐: center！重要，但它不会随着它上面的项目居中，让它看起来很奇怪。如何将“稍后可能”按钮与其上方项目的文本很好地居中
下面是我尝试过的html
<ion-content no-padding>
<ng-container style = "text-align: center;" *ngIf = "nextOptions == 'previous'">
<ion-item lines="none" no-p
浏览 0提问于2019-11-25得票数 5
回答已采纳
1回答
我正在将源代码从ionic3迁移到ionic4。
由于此错误，html中文本中心的用法发生了变化。
[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
Replace:
'<p text-center>'
With:
'<p class="ion-text-center">'
如何用ionic4编写以下代码？
请帮帮我。
面向的ionic3写作
html
<p class="txt_login" text-center (click)=&#
浏览 1提问于2020-02-08得票数 0
回答已采纳
我想为我的ionic应用程序添加完整的背景图片&每个设备都有不同的图片。
这是我的css代码。
针对iphone 6的媒体查询
@media(max-width:750px) and (max-height:1334px){
.pane, .view{
background: url(../img/home/Default-667h.png) no-repeat center top fixed;
background-size: 100% auto;
top: 0;
left: 0;
width: 100%;
浏览 0提问于2015-05-05得票数 3
我跟着这个，我在3:06:35点
然而，当我将css实用程序text-center应用于<h1>标记时，我的标题不会在应用程序中居中。
当我在chrome的检查器上ctrl +f这个css实用程序时，这个css实用程序似乎是global.scss文件的一部分。但是，当我ionic serve时，这个文件的所有内容都会被注释掉。
看一下源代码，我从来没有评论过其中的任何一个。
如何在我的离子型应用程序中应用global.scss脚本？
浏览 1提问于2020-02-25得票数 0
回答已采纳
1回答
多视图垂直滚动条
、、
我正在使用多个命名视图来构建一个Ionic应用程序屏幕。
问题是，我有一个垂直滚动条横跨整个屏幕，即使没有可滚动的内容。
滚动条覆盖页眉、内容和页脚部分。content部分包含一个列表，因此我希望为该部分提供一个滚动条，但前提是需要足够的内容。
这是密码.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, ma
浏览 3提问于2016-11-10得票数 0
回答已采纳
我正在创建一个angularJS应用程序，并决定将控制器分成多个文件。这就是我所拥有的：
对于声明模块，我有一个文件，其内容如下：
文件: controllers.js
angular.module('starter.controllers', []);
我使用的另一个控制器名为ConnectionsController: File: ConnectionsController.js
angular.module('starter').controller('ConnectionsController', ['$scope', &
浏览 8提问于2015-11-23得票数 3
回答已采纳
我有一个离子工程已经在工作和运行了。我想要修改它，所以我手动编写并添加了Dockerfile和.dockerignore。我的项目结构如下：
我的package.json：
{
"name": "example",
"version": "1.1.1",
"description": "example: An Ionic project",
"dependencies": {
"angular-messages": "^1.5
浏览 8提问于2017-04-19得票数 0
1回答
我想在离子创建可拖动(自由)按钮。在ionic 3中，我使用了一个指令(链接https://www.joshmorony.com/building-an-absolute-drag-directive-in-ionic-2/)来做这件事，但是这个指令在ionic 5中不起作用，它不会给出任何错误。你认为ionic 5最好的库是什么(从一些教程中得到支持)？提前谢谢。
浏览 12提问于2020-06-26得票数 1
回答已采纳
2回答
我正在尝试在一个Ionic应用程序中使用谷歌图表。但是，在浏览器中测试应用程序时，我只能得到一个空白页面。我在这里做错什么了？
我的app.js文件如下所示：
angular.module('testGC', ['ionic', 'googlechart', 'googlechart-docs'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.
浏览 2提问于2016-01-02得票数 1
回答已采纳
1回答
所以，我有这个角度上的简单代码，可以在jsfiddle上工作，通过按Run代码片段可以看到：
function ContactController($scope) {
$scope.contact = 0;
$scope.add = function() {
$scope.contact += 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div
浏览 3提问于2015-08-13得票数 0
回答已采纳
如果我在@ ionic /vue源代码的index.html头中放置materialize css链接，我是否能够在vue和ionic组件中/在vue和ionic组件中使用这些css类样式？它会覆盖Ionic组件的默认样式吗？
浏览 9提问于2019-06-22得票数 0
回答已采纳
我对离子框架很陌生。在我的应用程序中，我试图输入一些东西，当用户点击add按钮时，我希望它保存在我的数据库中。我该如何定义控制器呢？在这里我应该使用什么后端来路由呢？我真的很困惑从哪里开始。请帮帮我。任何线索都会有帮助。这是我的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,
浏览 2提问于2015-10-07得票数 0
回答已采纳
我正在使用Ionic 4创建一个浮动的动作按钮，我想让它变得更大。如果我给按钮一个类并转到scss文件来改变高度和宽度，位置是混乱的(我在水平和垂直方向上都使用了center )，它改变了大小，但使按钮从屏幕的中心开始向下，而不是真正居中(希望它在这里是有意义的)。
我怎样才能正确地做到这一点？不幸的是，网络上的所有答案都与v4无关
下面是我的html代码：
<ion-fab vertical="center" horizontal="center" slot="fixed">
<ion-fab-button col
浏览 0提问于2019-06-13得票数 0
我想把三张图片水平居中。
.music {
width: 200px;
height: 200px;
background-image: url('image/music1.png');
margin: 0 auto;
display: inline-block;
cursor: pointer;
}
.music2 {
width: 200px;
height: 200px;
background-image: url('image/music2.png');
margin: 0 auto;
display: inline-block;
cursor: po
浏览 2提问于2013-10-02得票数 0
2回答
我跟踪我的离子反应应用程序的问题。
初始启动后，登录页面显示为expected.After成功登录，this.state.login.status打开true并加载主组件(查看此组件的日志输出)。但是屏幕只显示一个空白页。在重新加载页面后(使用成功的登录数据，我要将其保存在localStorage中)，主页组件将如预期的那样出现。
在每个设备(Chrome、Android、Ios)上，这种行为都是一样的。控制台不显示任何错误消息。
我只看到了Android和Chrome之间的一个区别。如果我用chrome注销，就会出现登录页，并且我可以重新登录(没有空白页)。因此，问题只是针对第一次状态变化。
浏览 2提问于2020-05-19得票数 0
回答已采纳
我想知道这是不是一个常见的问题。我的ion-title在安卓系统的工具栏中没有居中。
我在谷歌上搜索了一下，但我找不到ionic 4的任何东西，我发现ionic 3中有一个相当好的解决方案。
这就是：
我想知道是否有人知道如何在ionic4中做到这一点？
这是一张它在android上的图片：
浏览 0提问于2019-02-09得票数 18
回答已采纳
1回答
我正在建立一个应用程序为安卓和iOS使用离子。
我在我的视图中使用bar-header作为标题：
<ion-view view-title="Home" class="tab-home">
<ion-content class="padding">
<div class="bar bar-header bar-positive">
<div class="h1 title">The European Experience
浏览 1提问于2016-06-16得票数 2
4回答
我试着用JQuery使这个div居中，这样它就能响应，但我似乎做不到，我已经试过了
function resize() {
var h = $(window).height();
var w = $(window).width();
var ct = $("#content");
ct.height(h / 2.5);
ct.width(w / 2.5);
ct.css("left", w / 2);
ct.css("right", w / 2);
ct.css("top", h / 2);
浏览 0提问于2019-05-02得票数 0
我正在创建一个新的Ionic应用程序，我需要从旧应用程序中提取大量样式。新的应用程序是ionic 2，旧的是ionic 1。ionic 1应用程序从lib/ionic/css/ionic.css中提取了很多样式。我在ionic 2应用程序中找不到类似的东西。我在哪里可以找到这个？我只需要把文件复制过来吗？ionic 2会有冲突问题吗？
浏览 2提问于2017-02-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
