标签: alignment

在问题中显示内联块文本

我一直在尝试显示内联块，如果我没有在 div 中添加任何东西，一切都会很好，但是当我这样做时，div 崩溃了，我不知道为什么。

任何的想法？

https://jsfiddle.net/giancorzo/ebqoptbd/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>8 cajas</title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <div class="caja"></div>
        <div class="caja-grande">
            <div class="caja inline-block">
                <span>Hola mundo</span>
            </div>
            <div class="caja inline-block">
            </div>
            <div class="caja inline-block">
        CSS:    </div>
        </div>
        <div class="caja inline-block"></div>
        <div class="caja inline-block"></div>
        <div class="caja"></div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS：

.caja{
    background-color: gray;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 5px;
}

.inline-block{
    display: inline-block;
}

.caja-grande{
    background-color: gray;
    border: 1px solid black;
    padding: 5px;
    width: …

Run Code Online (Sandbox Code Playgroud)

html css alignment

Gia*_*rzo

2018 02-21

0
推荐指数

1
解决办法

3927
查看次数

尝试调整控制台的输出内容

我有一个 DisplayResults 方法，当调用它时，它将其内容输出到控制台。我很难让它很好地对齐。我使用制表符 \t 来对齐它，但它看起来会更好。这是代码：

        public static void DisplayResults(string empName, decimal empWeeklySales, decimal COMMISSION_RATE, decimal grossPay, 
                                      decimal INCOME_TAX_RATE, decimal incomeTaxPayable, decimal PRSI_RATE, decimal prsiPayable,
                                      decimal RETIREMENT_CONTRIBUTION_RATE, decimal retirementContribution, 
                                      decimal totalDeductions, decimal takeHomePay)
    {
        Console.WriteLine("\n*************** WEEKLY PAYROLL APP ***************\n");

        Console.WriteLine("Employee Name: \t\t\t\t{0}\n", empName);
        Console.WriteLine("This week's sales: \t\t\t{0:n}", empWeeklySales);
        Console.WriteLine("Commission Rate: \t{0:F2}%\n", COMMISSION_RATE);

        Console.WriteLine("Gross Pay: \t\t\t\t{0:F2}", grossPay);
        Console.WriteLine("Income Tax: \t\t({0:F2}%) \t{1:F2}", INCOME_TAX_RATE, incomeTaxPayable);
        Console.WriteLine("PRSI: \t\t\t({0:F2}%) \t{1:F2}", PRSI_RATE, prsiPayable);
        Console.WriteLine("Retirement Contribution: ({0:F2}%) \t{1:F2}", RETIREMENT_CONTRIBUTION_RATE, retirementContribution);

        Console.WriteLine("Total Deductions: \t\t\t{0:F2}\n", totalDeductions);

        Console.WriteLine("Take Home Pay: \t\t\t\t{0:F2}\n", …

Run Code Online (Sandbox Code Playgroud)

c# console alignment

Nep*_*n14

lucky-day

0
推荐指数

1
解决办法

2591
查看次数

CSS - div 与父 div 底部对齐（内联块）

我知道这个 html 很草率，有一些不必要的额外 div，但无论如何，我无法理解为什么 ID 为“info_box_right”的 div 与父 div 的底部对齐（您可以看到“文本”对齐到下面的 jsfiddle 示例的底部）。

有什么想法可以让它与其父级的顶部对齐吗？

http://jsfiddle.net/taddme0y/1/

HTML：

<div id="info_container" >
    <div id="info_box">
        <hr class="info_box_hr" noshade>
            <a id="info_box_title"></a>
        <hr class="info_box_hr" noshade>
        <div id="info_box_wrapper">
            <div id="info_box_left">
                <div class="info_box_sub_wrapper">
                    <a id="info_box_logo">
                        <img class="info_img" id="info_img_logo" alt="logo">
                    </a>
                    <a id="info_box_screenshot">
                        <img class="info_img" id="info_img_screenshot" alt="screenshot">
                    </a>
                </div>
            </div>
            <div id="info_box_right">
                <div class="info_box_sub_wrapper">
                    <a id="info_box_right_text">
                        Text
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS：

#info_container {
    z-index: 500;
    position: relative;
    top: 0;
    left: 0;
    width: 80%;
    height: 0;
    margin: 0 …

Run Code Online (Sandbox Code Playgroud)

html css position alignment

sea*_*ean

lucky-day

0
推荐指数

1
解决办法

3975
查看次数

在语义 UI 菜单中垂直居中内容

请参阅此处的 jsfiddle。

在语义 UI 中，如何创建具有 (a) 垂直居中的项目和 (b) 项目内图标和文本之间的垂直中断的水平菜单？

这段代码...

<div class="ui icon menu">
    <div class="item">
        <div style="width:100px;height:100px;background:#f00"></div>
    </div>
    <div class="item">
        I want this<br>vertically centered
    </div>
    <div class="item">
        <i class="huge blue settings icon"></i>
        I want these<br>beneath the icon
    </div>
    <div class="item">
        <i class="huge blue power icon"></i>
        ... and centered<br>vertically
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

……接近了。以下是添加labeled到菜单之前和之后发生的情况。

没有labeled我无法弄清楚如何移动图像下方的文本。

使用labeled，我无法弄清楚如何垂直居中项目内容。

有什么建议吗？

编辑：最简单的解决方案是回答“如何在项目中的图标和文本之间强制换行？”的问题。

css alignment semantic-ui

neo*_*kio

2017 02-19

0
推荐指数

1
解决办法

4421
查看次数

Css Grid：居中对齐 2 行中不同数量的项目

我必须div在两行中放置 7 s（图像），在第一行中放置3 个，在第二行中放置 4 个。顶部 3 divs 应该居中，底部 4 可以占据所有空间。

这是我所做的：

.content {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr repeat(3, 170px) 1fr;
  grid-template-areas: ". item1 item2 item3 ."
                       "item4 item5 item6 item7";
  grid-template-rows: 1fr 1fr;
}

.content .box {
   width: 170px;
   height: 170px;
   border: solid 1px #000;
}

.content.box:nth-child(1) {
  grid-area: box1;
}

.content.box:nth-child(2) {
  grid-area: box2;
}

.content.box:nth-child(3) {
  grid-area: box3;
}

.content.box:nth-child(4) {
  grid-area: box4;
}

.content.box:nth-child(5) {
  grid-area: box5;
}

.content.box:nth-child(6) {
  grid-area: …

Run Code Online (Sandbox Code Playgroud)

html css alignment css-grid

Zoh*_*jaz

2019 02-17

0
推荐指数

1
解决办法

2379
查看次数

为什么“align”不是 div 的有效属性但仍然有效？

我设置了 'align="center"'，它下面出现了一条绿线，表示它不是“元素 div 的有效属性”。如果还有影响的话怎么会这样呢？

<div align="center" ></div>

Run Code Online (Sandbox Code Playgroud)

html css center alignment

作者

lucky-day

0
推荐指数

1
解决办法

3145
查看次数

Altair Y 轴标签左对齐和间距编辑可能吗？

我正在尝试在 Altair 中重新创建此图表，但无法弄清楚如何进行一些小的编辑：https : //datawrapper.dwcdn.net/E0jaK/1/

这是我目前的进度：https : //imgur.com/RMuTU7h

我想弄清楚的三个编辑是：

如何左对齐 y 轴标签
如何在标签和 y 轴之间添加间距
如何将条形编号标签移动到条形的底部而不是末端

关于如何实施这些编辑的任何见解都会很棒。

这是原始数据：

Crime,Count
Larceny/Theft,739
Assault,177
Burglary/Breaking & Entering,133
Destruction of Property/Vandalism,128
Drugs,107
Motor Vehicle Theft,95
Fraud,71
Sex Offenses,57
Suspicious Activity,45
Trespassing,23
Family Offenses,22
Weapons Violations,21

Run Code Online (Sandbox Code Playgroud)

这是我使用的主题：

def chart_theme():
    font = "Calibri"
    return {
        "width": 700,
        "height": 300,
        "background": "white",
        "config": {
            "title": {
                "fontSize": 20,
                "anchor": "start" 
            },
            "axisY": {
                "labelFont": font,
                "labelFontSize": 13,
                "labelLimit":200,
                "ticks": False, 
                "titleFont": font,
                "titleFontSize": 12,
                "titleAlign":"right", …

Run Code Online (Sandbox Code Playgroud)

label alignment spacing altair

Has*_*rad

lucky-day

0
推荐指数

1
解决办法

1593
查看次数

如何通过边框将表格居中

我正在为我的 MMO RPG 游戏制作我的物品法典……我完成了数据加载器的设置，该加载器设置了包含我的物品数据的表格。

一切看起来都很好，除了我实例化我的项目信息的表格居中。

因为它是动态的，它的居中是基于单元格中文本/数据的长度，这导致了下图中这种丑陋的效果。

我试图找到一种方法，通过连接两侧的边框将表格居中，如图所示，红色边框是它应该放置的位置，但不是。

我可以达到这种效果的最佳方法是什么？

在此处查找实时 URL 版本。

html css alignment centering css-tables

Tay*_*orS

2021 01-18

0
推荐指数

1
解决办法

50
查看次数

将 Apache POI Word 文档中表格单元格的内容居中并加粗

如何在 Word 文档中使用 Apache POI 将表格单元格的内容居中和加粗？这是我用来构建表的代码：

XWPFDocument document = new XWPFDocument();
XWPFTable table = document.createTable();

XWPFTableRow tableRowOne = table.getRow(0);
tableRowOne.getCell(0).setText("CUSTOMER_NAME");
tableRowOne.addNewTableCell().setText("Kumar");
tableRowOne.addNewTableCell().setText("CUSTOMER_ID");
tableRowOne.addNewTableCell().setText("123");

XWPFTableRow tableRowTwo = table.createRow();
tableRowTwo.getCell(0).setText("AGE_GENDER");
tableRowTwo.getCell(1).setText("25/M");
tableRowTwo.getCell(2).setText("VISIT_DATE");
tableRowTwo.getCell(3).setText("11/02/2021");

XWPFTableRow tableRowThree = table.createRow(); 
tableRowThree.getCell(0).setText("REFERRED_BY");
tableRowThree.getCell(1).setText("Self");

Run Code Online (Sandbox Code Playgroud)

java ms-word alignment apache-poi

Har*_*esh

2021 02-16

0
推荐指数

1
解决办法

332
查看次数

无法将 Bootstrap 5 中的项目与页面中心对齐

我正在尝试使用 Bootstrap Flex Box 将项目与 html 页面的中心对齐。由于某种原因，align-items-center 属性不起作用。

<!DOCTYPE html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
    <div class="container d-flex justify-content-center align-items-center">
        elment goes here
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

Run Code Online (Sandbox Code Playgroud)

html alignment bootstrap-5

作者

lucky-day

0
推荐指数

1
解决办法

2606
查看次数