Question

如何在div内垂直居中对齐文本？

我的html页面中有一个div元素，其中div的高度是屏幕尺寸，并且该div内的文本必须居中。我已经使用text-align：center属性将其水平对齐，但是我也需要水平对齐。

Answer 1

我认为这很适合您

.your-div-class {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

Answer 2

.wrapper{

/* just to create a box */
  width:300px;
  height:300px;
  margin:auto;

/* use flex to center vertically */
  display:flex;
  justify-content: center;
  flex-direction: column;
  
/* use text-align to center horizontally, can also be done on the text element itself if its a block */
  text-align: center;
}

<div class="wrapper">
<span class="text">My super centered text</span>
</div>

使用flexbox将文本元素垂直居中，然后使用text-align将其水平居中。（在代码段中向下滚动）

Answer 3

您可以尝试

HTML

var express = require("express");
var router = express.Router();
var aws = require('aws-sdk');
aws.config.update({
    secretAccessKey: config.AwsS3SecretAccessKey,
    accessKeyId: config.AwsS3AccessKeyId,
    region: config.AwsS3Region
});

router
    .route("/uploadImage")
    .post(function (req, res) {

    //req.files.imageFile contains the file from client, modify it as per you requirement
    var file = getDesiredFileFromPaperclip(req.files.imageFile);
    const fileName = new Date().getTime() + file.name;

    //before uploading, we need to create an instance of client file
    file.mv(fileName, (movErr, movedFile) => {
        if (movErr) {
            console.log(movErr);
            res.send(400);
            return;
        }
        //read file data
        fs.readFile(fileName, (err, data) => {
            if (err) {
                console.error(err)
                res.send(400);
            }
            else {

                //as we have byte data of file, delete the file instance
                try {
                    fs.unlink(fileName);
                } catch (error) {
                    console.error(error);
                }

                //now, configure aws

                var s3 = new aws.S3();
                const params = {
                    Bucket: config.AwsS3BucketName, // pass your bucket name
                    Key: fileName, // file will be saved as bucket_name/file.ext
                    Body: data
                }

                //upload file
                s3.upload(params, function (s3Err, awsFileData) {
                    if (s3Err) {
                        console.error(s3Err)
                        res.send(400);
                    } else {
                        console.log(`File uploaded successfully at ${awsFileData.Location}`)

                        //update uploaded file data in database using 'models.Users.update'

                        //send response to client/frontend
                        var obj = {};
                        obj.status = { "code": "200", "message": "Yipee!! Its Done" };
                        obj.result = { url: awsFileData.Location };
                        res.status(200).send(obj);
                    }
                });
            }
        });
    });
});

css

<div class="main">
  <div class="sub">
     <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
     </p>
  </div>
</div>

如何在<div>元素内水平对齐文本？

3 个答案: