How can I vertically align all my contents of my Table View Cell?

Question

I want to make all the contents in my table cell vertical align center.

I want my content to render at the red line

I've tried

via code

func updateTableViewContentInset() {
    let viewHeight: CGFloat = view.frame.size.height
    let tableViewContentHeight: CGFloat = placesTable.contentSize.height
    let marginHeight: CGFloat = (viewHeight - tableViewContentHeight) / 2.0

    self.placesTable.contentInset = UIEdgeInsets(top: marginHeight, left: 0, bottom:  -marginHeight, right: 0)
}

override func viewWillAppear(_ animated: Bool) {
    updateTableViewContentInset()
}

I tried

I got

result

or even via the storyboard, but have not get the desired result that I am looking for yet.

Any hints for me ?

user_5820010 · Answer

You need to remove the top constraints of the labels and ctrl-drag from the left most label to contentView and select center vertically but note you need to implement heightForRowAt to give the correct height

user_986169 · Answer

If you want to center the content you can do the following in storyboard:

For the left side (two labels), add a vertical stack view and constraint it to content view's vertical center and a leading constraint to the content view.
In the stack view add your two labels, the stackview height/width will be set automatically (called intrinsic size, where the view calculates its size according to its content)
For the right side just add the labels and set a constraint to center vertically in the content view. add additional constraints to set them apart as they do now.

user_7487701 · Answer

Firstly select the two elements in left and add them in vertical stack view like this:

Then select the elements that you want to center inside your cell and apply Vertically in container.

For horizontal constraints between elements, select each element and add constraints like this:

user_6257435 · Answer

I have your cell laid out like this:

The address Top and Bottom labels are contained in a UIStackView with:

Alignment: Leading
Distribution: Fill
Spacing: 4

The stack view is constrained Leading to Leading Margin, and Vertically Centered
The "miles" label is constrained Trailing to Trailing Margin, and Last Baseline to the "distance" label
The "distance" label is constrained Trailing to "miles" Leading, with 8-pts for padding
The "distance" label is also constrained Vertically Centered
The StackView Trailing is constrained >= to "distance" Leading, with 8-pts for padding
and finally, the "distance" label's Compression Resistance is set to 1000 to give it priority (so the address line may get truncated, but the distance value won't)

The result:

Here is the source of the xib file so you can inspect the layout if you run into any problems:

How can I vertically align all my contents of my Table View Cell?

4 Answers